0

私は2つのキャンバス、canvas1とcanvas2を持っています。どちらもうまく機能しますが、画像としてエクスポートするためにそれらを混合したいと思います。オーバーレイCSSベースは、2つの画像を印刷するため、機能しません。どこから始めますか？ありがとうございました。

<canvas id="canvas1" style="position:relative; float:left;border:1px solid #000 "     width="547" height="154">
</canvas>

<canvas id="canvas2" style="z-index: 1; position:absolute; float:left;" width="547" height="500">
</canvas>
4

1 に答える 1

0

さて、これを行うにはいくつかの方法がありますが、ミックスとはどういう意味ですか？

単にcanvas2をcanvas1にオーバーレイしたいが、元のキャンバスを変更したくない場合は、それらのデータを別のキャンバスに送信してから、そのデータを取得できます。

従う方法：

draw canvas1 to canvas3
draw canvas2 to canvas3
get  canvas3 image

動作するJavaScript：

// Make all the canvas and context variables */
var c1 = document.getElementById('c1');
var c2 = document.getElementById('c2');
var c3 = document.getElementById('c3');
var c4 = document.getElementById('c4');

var ctx1 = c1.getContext('2d');
var ctx2 = c2.getContext('2d');
var ctx3 = c3.getContext('2d');
var ctx4 = c4.getContext('2d');
/* */

// Draw square on canvas 1
ctx1.fillRect(0,0,50,50);

// Draw offset square on canvas 2
ctx2.fillRect(25,25,50,50);

// Make third image and onload function
var img3 = new Image();
img3.onload = function(){
  // Draw this image to canvas 4 so that we know it worked
  ctx4.drawImage(this,0,0);
}

// So we know when both have loaded
var imagesLoaded = 0;
function draw(){
  // increment number loaded
  imagesLoaded++;

  // draw this image to canvas 3
  ctx3.drawImage(this,0,0);

  // if the have both loaded, then...
  if (imagesLoaded == 2){

    // set third image's src to the canvas 3 image
    img3.src = c3.toDataURL();
  }

}

// First image
var img1 = new Image();
// So it will draw on canvas 3
img1.onload = draw;
// Set the src to canvas 1's image
img1.src = c1.toDataURL();


// Second image
var img2 = new Image();
// So it will draw on canvas 3
img2.onload = draw;
// Set the src to canvas 2's image
img2.src = c2.toDataURL();

ここでの実例。

しかし、それがあなたが探していたものではなかった場合は、申し訳ありません。

于 2013-01-11T02:24:55.337 に答える