我有三个数组:
clickX = [],
clickY = [],
clickDrag = [];
这是当你点击时发生的事情:
$('#canvasCursor').mousedown(function (e) {
console.log('down');
mouseX = e.pageX - this.offsetLeft;
mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
这里它将点击添加到数组并绘制。:
函数重绘() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);//清除 Canvas
ctx.strokeStyle = "green";
ctx.lineJoin = "round";
ctx.lineWidth = brushSize*2;
for (var i = 0; i < clickX.length; i++) {
ctx.beginPath();
if (clickDrag[i] && i) {
ctx.moveTo(clickX[i - 1], clickY[i - 1]);
} else {
ctx.moveTo(clickX[i] - 1, clickY[i]);
}
ctx.lineTo(clickX[i], clickY[i]);
ctx.closePath();
ctx.stroke();
}
}
我现在正试图摆脱数组的处理方式,因为当我使用 slider 动态更改 var brushSize 时,它会以新大小而不是当时的大小重新绘制整个图片。我不知道如何在数组中保存任何特定对象的大小,然后将它们分开绘制。
我不介意我是否不能实现这种方式给我的撤消功能,只要我能修复画笔大小的变化。在这里你可以看到我在胡说八道! http://www.taffatech.com/Paint.html
-它看起来也更慢,我猜是因为它是从数组中绘制的
最佳答案
不要将绘画存储到数组
它严重减慢了绘图速度。只需绘制最新的线条而不清除 Canvas 。这样 lineWeight 的变化不会影响之前的绘图。所以移除 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
和 for
循环。您还可能希望仅在发生更改时更改context 样式(lineWidth 等),而不是每次运行 redraw()
函数时。
撤消支持
为每个鼠标按下 session 制作不同的 Canvas 并将它们绘制在一起,您可以轻松制作撤消功能。通过按撤消,它只是将最新的 Canvas 从 Canvas 数组中拼接出来。 Google 以了解有关绘制到临时 Canvas 的更多信息。
关于javascript - 像在油漆中一样在 Canvas 上绘图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17128781/