javascript - 像在油漆中一样在 Canvas 上绘图

Question

我有三个数组:

 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

-它看起来也更慢，我猜是因为它是从数组中绘制的

Answer 1

不要将绘画存储到数组
它严重减慢了绘图速度。只需绘制最新的线条而不清除 Canvas 。这样 lineWeight 的变化不会影响之前的绘图。所以移除 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 和 for 循环。您还可能希望仅在发生更改时更改context 样式(lineWidth 等)，而不是每次运行 redraw() 函数时。

撤消支持
为每个鼠标按下 session 制作不同的 Canvas 并将它们绘制在一起，您可以轻松制作撤消功能。通过按撤消，它只是将最新的 Canvas 从 Canvas 数组中拼接出来。 Google 以了解有关绘制到临时 Canvas 的更多信息。