如何预览线条工具？

Question

我试图制作一个绘图应用程序并且当前正在使用这个线条工具，并希望在Microsoft Paint和其他绘图应用程序中进行预览。

我正在使用HTML5 Canvas和Javascript，我也使用典型的画布绘制API，如下所示：

context.beginPath();
context.moveTo(originX, originY);
context.lineTo(mousePos.x, mousePos.y);
context.stroke();

然而，当用户试图确定他想要哪一行时，它开始看起来像这样，因为它没有删除前一行：

中间的点是用户开始绘制线条的原点。我不能每次都清理画布，因为还有其他东西可能画出来。我能想到的唯一解决方案是实现某种撤销功能，但这似乎很慢而且很草率。

有没有人知道如何实现这种预览功能？

Answer 1

我建议使用多个画布。

<强> Live Demo

所以基本上他们在继续清除的顶部绘制初步绘图，一旦他们释放鼠标按钮，然后将其绘制到较低的“永久”画布。

来自小提琴的代码，由于jsFiddle最近一直很慢，因此将其添加以供参考。

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    drawCanvas = document.getElementById("drawCanvas"),
    drawCtx = drawCanvas.getContext("2d"),
    painting = false,
    lastX = 0,
    lastY = 0,
    curX = 0,
    curY = 0,
    startX = 0,
    startY = 0,
    lineThickness = 1;

canvas.width = canvas.height = 600;

drawCanvas.width = drawCanvas.height = 600;

drawCanvas.onmousedown = function(e) {
    startX = e.pageX - this.offsetLeft;
    startY = e.pageY - this.offsetTop;
    painting = true;

};

drawCanvas.onmouseup = function(e){
    painting = false;

    ctx.strokeStyle = "#000";
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(lastX, lastY);
    ctx.stroke();

    drawCtx.clearRect(0, 0, 600, 600);
}

drawCanvas.onmouseclick = function(e) {

    startX = e.pageX - this.offsetLeft;
    startY = e.pageY - this.offsetTop;

    painting = true;
};


drawCanvas.onmousemove = function(e) {
    if(painting){
        lastX = e.pageX - this.offsetLeft;
        lastY = e.pageY - this.offsetTop;
        drawCtx.clearRect(0,0,600,600);
        drawCtx.beginPath();
        drawCtx.moveTo(startX ,startY );
        drawCtx.lineTo(lastX, lastY);
        drawCtx.stroke();
    }
}
​