如何从画布中的渲染元素获取副本?

Question

如何复制绘制的元素并将其粘贴到画布中的另一个位置？

var ctx = canvas.getContext("2d");
function draw(){
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(150,200);
ctx.stroke();
}
function copy(){
//.............
}

我需要一个函数，可以在定义的坐标上复制画布中的一部分绘图。

另外，如何在包上设置图纸组？

Answer 1

您可以使用转换。另外：不要忘记使用ctx.beginPath();

document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 300,
cx = cw / 2;
let ch = canvas.height = 300,
cy = ch / 2;
function draw(){
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(150,200);
ctx.stroke();
}
draw();
function copy(x,y){
ctx.save();
ctx.translate(x,y)
draw();
ctx.restore()
}
copy(50,10);

canvas{border:1px solid;}

<canvas id="canvas"></canvas>

Answer 2

嗯，一个简单的方法是将画布的一部分复制为 imageData，然后将其复制到画布的其他部分：

function copy(){
var imageData = ctx.getImageData(0,0,150,200);
ctx.putImageData(imageData,250,0);
}

这将在 ctx.putImageData 中指定的坐标处再次绘制指定区域中的所有内容，包括在调用 draw(( 之前绘制的内容。它还忽略了透明度，因此副本将简单地替换已经存在的背景或类似背景，而不是替换它们。

另一种选择是将要复制的内容渲染到不可见的画布上，然后将其绘制到主画布上：

var tempCanvas = document.createElement("canvas");
var tempCtx = tempCanvas.getContext("2d");
tempCtx.beginPath();
tempCtx.moveTo(0,0);
tempCtx.lineTo(100,100);
tempCtx.lineTo(150,200);
tempCtx.stroke();
drawTo(0,0);
drawTo(250,0);
function drawTo(x,y){
ctx.drawImage(tempCanvas,x,y);
}

这也适用于透明度，因此您复制的绘图不必是矩形的，仍然可以在不擦除部分背景的情况下进行复制。您甚至可以以不同的大小粘贴图像：

function drawTo(x,y,scale){
ctx.drawImage(tempCanvas,x,y,tempCanvas.width*scale,tempCanvas.height*scale);
}