2

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

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

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

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

在此处输入图像描述

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

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

4

1 回答 1

4

我建议使用多个画布。

现场演示

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

小提琴中的代码，由于 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();
    }
}
​
于 2012-06-29T20:46:48.257 回答