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

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

2 个答案: