html - 2 つまたは 3 つのキャンバスの内容を別のキャンバスにローカルにコピーする方法

Question

私はキャンバスのいくつかの層を持っています:

<canvas id="layer1" width="700" height="700" class="pageCanvas">   </canvas>
<canvas id="layer2"  width="700" height="700" class="pageCanvas">   </canvas>
<canvas id="layer3"  width="700" height="700" class="pageCanvas">   </canvas>

キャンバスの画像を入れたい

レイヤー1とレイヤー2

キャンバスに

レイヤー3。

インターネット上で適切な説明が見つからなかったので、コードを書き留めていただければ幸いです。

ありがとう

Answer 1

2つのキャンバスを組み合わせてlayer3に配置します。

var canvas1 = document.getElementById('layer1');

var canvas2 = document.getElementById('layer2');

var canvas3 = document.getElementById('layer3');

canvas3.drawImage(canvas1, 0, 0);

canvas3.drawImage(canvas2, 0, 0);