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

前端之家收集整理的这篇文章主要介绍了html5 – 如何将html 5画布的背景图像设置为.png图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道如何将画布的背景图像设置为.png文件。我不想将图像添加到画布的后面,并使画布透明。

我希望用户能够在背景图像上实际绘制该画布,以便我可以稍后将其解压缩为使用用户制作的图形的.png。

解决方法

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>
原文链接:https://www.f2er.com/html5/169085.html

猜你在找的HTML5相关文章