我想知道如何将 Canvas 的背景图像设置为 .png 文件。我不想在 Canvas 背面添加图像并使 Canvas 透明。
我希望用户能够在背景为 .png 图像的 Canvas 上实际绘图，以便我稍后可以将其提取为带有用户绘制的绘图的 .png。
最佳答案
如图this example ，您可以通过 CSS 将背景应用于 canvas 元素，并且此背景不会被视为图像的一部分，例如当通过 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>
关于html - 如何将 html 5 Canvas 的背景图像设置为 .png 图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5241365/