删除HTML5画布上以前绘制的线条

Question

为了使用HTML5画布,我决定制作一个绘制模拟表盘的应用程序.一切都很好,除了旧的线条没有像我期望的那样被抹去.我已经包含了下面的部分代码 - DrawHands()每秒调用一次:

var hoursPoint = new Object();
var minutesPoint = new Object();
var secondsPoint = new Object();

function drawHands()
{
    var now = new Date();

    drawLine(centerX, centerY, secondsPoint.X, secondsPoint.Y, "white", 1);
    var seconds = now.getSeconds();
    secondsPoint = getOtherEndOfLine(centerX, centerY, 2 * Math.PI / 60 * seconds, 0.75 * radius);
    drawLine(centerX, centerY, secondsPoint.X, secondsPoint.Y, "black", 1);

    drawLine(centerX, centerY, minutesPoint.X, minutesPoint.Y, "white", 3);
    var minutes = now.getMinutes();
    minutesPoint = getOtherEndOfLine(centerX, centerY, 2 * Math.PI / 60 * minutes, 0.75 * radius);
    drawLine(centerX, centerY, minutesPoint.X, minutesPoint.Y, "black", 3);

    drawLine(centerX, centerY, hoursPoint.X, hoursPoint.Y, "white", 3);
    var hours = now.getHours();
    if (hours >= 12) { hours -= 12; } // Hours are 0-11
    hoursPoint = getOtherEndOfLine(centerX, centerY, (2 * Math.PI / 12 * hours) + (2 * Math.PI / 12 / 60 * minutes), 0.6 * radius);
    drawLine(centerX, centerY, hoursPoint.X, hoursPoint.Y, "black", 3);
}

为了理解上述内容,有两个辅助函数:

• drawLine(x1,y1,x2,y2,颜色,厚度)
• getOtherEndOfLine(x,y,angle,length)

问题在于,虽然所有的手都按照预期的黑色绘制,但它们永远不会被删除.我希望由于相同的线条以白色(背景颜色)绘制,因此它将有效地擦除之前在该点绘制的内容.但事实似乎并非如此.

我缺少什么？

Answer 1

由于我可以扩展的原因,你应该考虑清除画布并重新绘制它,除非有性能或合成的原因不这样做.

你想要clearRect,像这样:

//clear the canvas so we can draw a fresh clock
ctx.clearRect(0, 0, canvasWidth, canvasHeight);

//redraw your clock here
/* ... */

Answer 2

而不是删除你不想要的东西,你可以:

1. 保存画布的状态
2. 画出你不想要的东西
3. 将画布恢复到已保存状态以"擦除"它们

这可以通过以下方式轻松完成ImageData:

var canvas = document.querySelector('canvas'),
    context = canvas.getContext('2d');

context.fillStyle = 'blue';
context.fillRect(0,0,200,200);

// save the state of  the canvas here
var imageData = context.getImageData(0,0,canvas.width,canvas.height);

// draw a red rectangle that we'll get rid of in a second
context.fillStyle = 'red';
context.fillRect(50,50,100,100);

setTimeout(function () {
    // return the canvas to the state right after we drew the blue rect
    context.putImageData(imageData, 0, 0);
}, 1000);

<canvas width=200 height=200>

Answer 3

您不能只用白色重新绘制线条并希望它擦除旧线条的原因是因为可能存在一些抗锯齿/出血。您还会注意到，因此，在像素上绘制的水平直线与半像素上绘制的水平线看起来非常不同。

当你做你的白色“擦除”线时，试着lineWidth用大约 3 或 4的大号来绘制它们。这应该适合你的情况。

您还应该先绘制所有白线，然后再绘制所有黑线，以防它们相交。