如何将html 5画布的背景图像设置为.png图像

Question

如何将html 5画布的背景图像设置为.png图像

Far*_*idi 25 html5 canvas background-image

我想知道如何将画布的背景图像设置为.png文件.我不想在画布背面添加图像并使画布透明.

我希望用户能够在背景为.png图像的情况下实际绘制该画布,以便稍后可以使用用户制作的图形将其提取为.png.

Answer 1

Phr*_*ogz 37

如此示例所示,您可以canvas通过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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 16

你可以用css给出背景图片:

#canvas { background:url(example.jpg) }

Run Code Online (Sandbox Code Playgroud)

它会显示画布背景图像

Answer 3

obe*_*msi 3

您可以在画布上绘制图像并让用户在其上进行绘制。

该drawImage()函数将帮助您，请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

归档时间：	14 年，6 月前
查看次数：	148300 次
最近记录：	11 年，6 月前