时间戳

首页 > 解决方案 > 如何从画布中的渲染元素获取副本？

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

问题描述

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

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

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

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

标签： javascriptcanvas

解决方案

您可以使用变换。另外：不要忘记使用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>

推荐阅读