javascript - 使用钢笔工具在 Canvas 上流畅地绘制一条线，而无需重新绘制所有其他线

Question

有没有一种方法可以避免重绘 Canvas 上的所有元素(这样我就不必跟踪所有内容)，同时仍然可以使用当前绘制的线条获得流畅的绘图体验？

Answer 1

这是一个很好的问题，但是措辞含糊。请以后注意措辞问题。

通常在绘制平滑线时，您需要从头开始重新绘制线。

虽然您不需要从头开始重绘一切，因为您应该遵循以下操作:

1. 将当前 Canvas 保存到内存 Canvas
2. 开始画一条新线
3. 在绘画时，您会不断地:
   • 清除 Canvas
   • 从内存 Canvas 绘制到主 Canvas
   • 到此为止
4. 当该行结束时，您将新 Canvas 保存到内存 Canvas 中并重复此过程

您唯一需要跟踪(以点数表示)的线是“当前”线。所有旧线都通过内存 Canvas 保存到位图中。

这是我很久以前做的一个例子，专门处理平滑的线条。代码组织很奇怪，因为我是从别人的代码开始的，但它应该给你基本的想法:

http://jsfiddle.net/NWBV4/10/

上面描述的绘图部分在mousemove中看到:

this.mousemove = function(ev) {
    if (tool.started) {
        context.clearRect(0, 0, 300, 300);
        // put back the saved content
        context.drawImage(memCanvas, 0, 0);
        tool.points.push({
            x: ev._x,
            y: ev._y
        });
        drawPoints(context, tool.points);
    }
};