用钢笔工具在画布上流畅地画一条线，而不必撤回所有其他线

Question

有没有办法避免重绘画布上的所有元素（这样我就不必跟踪所有内容），同时仍然对当前绘制的线条有流畅的绘图体验？

Answer 1

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

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

您不需要从头开始重绘所有内容，因为您应该遵循以下操作：

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

您需要跟踪的唯一行（就点而言）是“当前”行。所有旧行都通过内存画布保存到位图中。

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

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