问题与擦除画布形状

我遇到了我与背景颜色透支它删除对象，我离开的地方与原来的形状的轮廓的问题。 enter image description here

这里是我使用

是的，我不使用明确的矩形，因为圈可以重叠的代码。

function erase(eraseColor) { 
    ctx.fillStyle = ctx.strokeStyle = eraseColor || "#FFFFFF"; 
    drawCircle(); 
    ctx.fillStyle = ctx.strokeStyle = fillColor; 
} 

function drawCircle() { 
    ctx.beginPath(); 
    ctx.arc(x, y, rad, 0, Math.PI * 2, true); 
    ctx.closePath(); 
    ctx.fill(); 
}

来源

2011-08-07 samccone

这可能是由于抗锯齿。使清晰的圆圈略大（101％说）来弥补它。 –

你认为这将工作时，圆圈重叠？我不确定。为什么不坚持使用常规的基于帧的动画呢？ –

我相信这是由于抗锯齿。该效果不应出现在不需要抗锯齿（如矩形）的形状上。画出几个像素的擦除圈（应该做的）。

万一出现问题：you cannot turn off anti-aliasing for canvas。

Ray建议您应该考虑使用基于帧的动画，并使用脏矩形进行优化。

要做到这一点，你只需将一个矩形标记为脏，如果它内的任何像素已经改变（例如由于动画）。然后清除画布上的矩形（clearRect）并将其设置为剪切矩形（clip）。然后，遍历画布上显示的所有元素，并检查它们是否与脏矩形重叠。如果是，则绘制该元素，如果不是，则跳至下一个元素。

来源

2011-08-07 17:26:22

+1的原因，但有很多移动的圆圈可能会彼此重叠，任何通过绘制背景画圈都无法工作。应该使用框架进行动画（如果需要，也可以使用脏矩形进行优化）。 –

我绝对同意。 –

基于框架的动画会擦除所有像素，成本更高，然后重画会低得多，那么只需透支。除非我丢失了某些东西 – samccone

问题与擦除画布形状

回答

相关问题