Как получить копию от визуализированного элемента в канве?

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

Ну, одним простым способом было бы скопировать часть холста как imageData и скопировать его в другую часть холста:

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

Это снова нарисует все в указанной области вкоординаты, указанные в ctx.putImageData, включая объекты, которые были нарисованы до вызова draw ().Он также игнорирует прозрачность, поэтому копия будет просто заменять уже существующие фоны или аналогичные, а не заменять их.

Другой вариант - визуализировать вещи, которые вы хотите скопировать, на невидимый холст, а затем перетянуть это на основнойcanvas:

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

Answer 2

Вы можете использовать преобразования.Также: не забудьте использовать 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>