Question

我有2个canvas，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>

Answer 1

嗯，有几种方法可以解决这个问题，混合意味着什么？

如果您只想在canvas1上覆盖canvas2，但又不想更改任何原始画布，则可以将其数据发送到另一个画布，然后获取该数据。

要遵循的方法：

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();

工作示例here。

但是，如果那不是你想要的，我很抱歉。

画布叠加导出

1 个答案: