Question

我有红色矩形作为画布。

我有绿色矩形作为html元素。

我尝试将它们组合在一起作为一个canvas元素，如您在演示jsfiddle

中所见

我的代码：

  <!DOCTYPE html>
<html>
<head>
<style type='text/css'>
    #myCanvas{
  width:300px; height:150px;
  border:1px solid #d3d3d3;
  position:absolute; top:0;left:0;
}
div{
  width:75px; height:75px;
  border:1px solid blue;
  position:absolute; top:0;left:50px;
  background-color:green;
}
button{
   position:absolute; top:0;left:150px;

}
  </style>
  </head>
<body>

<canvas id="myCanvas" >
Your browser does not support the HTML5 canvas tag.</canvas>
  <div></div>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);

function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
</script>

<button onclick="copy()">Copy</button>

</body>
</html>

非常感谢。

Answer 1

没有直接的方法将html元素作为图像，然后您可以轻松地将其放入画布。但也许你可以通过截取html截图来实现它。

您可能想看看这篇文章;

Take screenshot of web page

是否可以将html元素和元素画布一起复制？

1 个答案: