Question

您好我已经为第一个画布中的第一个图像创建了一个圆形的表单，但是我没有成功使用第一个画布的dataURL并将其添加到第二个画布中。

var ctx = document.getElementById('canvas').getContext("2d");
var ctx2 = document.getElementById('canvas2').getContext("2d");

ctx.arc(150,150, 130, 0, Math.PI*2,true); // you can use any shape
ctx.clip();

var img = new Image();
img.addEventListener('load', function(e) {
    ctx.drawImage(this, 0, 0, 300, 300);

    img2.src=canvas.toDataURL();

}, true);
img.src="https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/10400072_76198580294_2746326_n.jpg?oh=b8cc93c35d6badfffb65ab5c9cbfce28&oe=5941AAB6";


img2.src=canvas.toDataURL();

谢谢。

Answer 1

无需获取第一个canvas的dataURL。您可以使用drawImage()方法将第一个canvas本身绘制到第二个canvas中：

var ctx = document.getElementById('canvas').getContext("2d");
var ctx2 = document.getElementById('canvas2').getContext("2d");
var img = new Image();
img.src = "https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/10400072_76198580294_2746326_n.jpg?oh=b8cc93c35d6badfffb65ab5c9cbfce28&oe=5941AAB6";
img.addEventListener('load', function(e) {
    ctx.arc(150, 150, 130, 0, Math.PI * 2, true);
    ctx.save();
    ctx.clip();
    ctx.drawImage(this, 0, 0, 300, 300);
    ctx.restore();
    ctx2.drawImage(ctx.canvas, 0, 0);
}, true);

#canvas2 {
  background-color: lightgrey;
}

<canvas width="300" height="300" id="canvas"></canvas>
<canvas width="300" height="300" id="canvas2"></canvas>

画布 - 将结果图像从第一个画布添加到第二个画布

1 个答案: