我有红色矩形作为画布。
我有绿色矩形作为 html 元素。
正如您在演示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>
非常感谢。