如何预览线条工具？

Question

我正在尝试制作一个绘图应用程序，目前正在使用线条工具，并且希望获得像 Microsoft Paint 和其他绘图应用程序中存在的预览。

我正在使用 HTML5 Canvas 和 Javascript，并且还使用典型的画布绘图 API，如下所示：

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

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

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

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

Answer 1

我建议使用不止一张画布。

\n\n

现场演示

\n\n

因此，基本上，他们在继续清除的顶部进行初步绘制，一旦他们释放鼠标按钮，它就会将其绘制到较低的“永久”画布上。

\n\n

来自小提琴的代码，我想添加它以供参考，因为 jsFiddle 最近很慢。

\n\n

var canvas = document.getElementById("canvas"),\n    ctx = canvas.getContext("2d"),\n    drawCanvas = document.getElementById("drawCanvas"),\n    drawCtx = drawCanvas.getContext("2d"),\n    painting = false,\n    lastX = 0,\n    lastY = 0,\n    curX = 0,\n    curY = 0,\n    startX = 0,\n    startY = 0,\n    lineThickness = 1;\n\ncanvas.width = canvas.height = 600;\n\ndrawCanvas.width = drawCanvas.height = 600;\n\ndrawCanvas.onmousedown = function(e) {\n    startX = e.pageX - this.offsetLeft;\n    startY = e.pageY - this.offsetTop;\n    painting = true;\n\n};\n\ndrawCanvas.onmouseup = function(e){\n    painting = false;\n\n    ctx.strokeStyle = "#000";\n    ctx.beginPath();\n    ctx.moveTo(startX, startY);\n    ctx.lineTo(lastX, lastY);\n    ctx.stroke();\n\n    drawCtx.clearRect(0, 0, 600, 600);\n}\n\ndrawCanvas.onmouseclick = function(e) {\n\n    startX = e.pageX - this.offsetLeft;\n    startY = e.pageY - this.offsetTop;\n\n    painting = true;\n};\n\n\ndrawCanvas.onmousemove = function(e) {\n    if(painting){\n        lastX = e.pageX - this.offsetLeft;\n        lastY = e.pageY - this.offsetTop;\n        drawCtx.clearRect(0,0,600,600);\n        drawCtx.beginPath();\n        drawCtx.moveTo(startX ,startY );\n        drawCtx.lineTo(lastX, lastY);\n        drawCtx.stroke();\n    }\n}\n\xe2\x80\x8b\n

\n