0

キャンバスとして赤い長方形があります。

そして、私はhtml要素として緑色の長方形を持っています。

デモjsfiddleでわかるように、それらを1つのキャンバス要素として結合しようとしています

私のコード:

  <!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>

どうもありがとう。

4

1 に答える 1

0

html要素を画像として取得する直接的な方法はなく、キャンバスに簡単に配置できます。でも、htmlのスクリーンショットを撮れば作れるかもしれません。

この記事をご覧になることをお勧めします。

ウェブページのスクリーンショットを撮る

于 2013-01-10T01:05:16.697 に答える