解决方法
如
this example所示,您可以通过CSS将背景应用于画布元素,并且此背景将不被视为图像的一部分,例如。当通过toDataURL()获取内容时。
以下是示例的内容,对于Stack Overflow后代:
<!DOCTYPE HTML> <html><head> <Meta charset="utf-8"> <title>Canvas Background through CSS</title> <style type="text/css" media="screen"> canvas,img { display:block; margin:1em auto; border:1px solid black; } canvas { background:url(lotsalasers.jpg) } </style> </head><body> <canvas width="800" height="300"></canvas> <img> <script type="text/javascript" charset="utf-8"> var can = document.getElementsByTagName('canvas')[0]; var ctx = can.getContext('2d'); ctx.strokeStyle = '#f00'; ctx.lineWidth = 6; ctx.lineJoin = 'round'; ctx.strokeRect(140,60,40,40); var img = document.getElementsByTagName('img')[0]; img.src = can.toDataURL(); </script> </body></html>