当颜色改变时，画布上的锯齿状边缘会变形

Question

我目前有一个问题，即更改画布的fillStyle导致平滑的对角线变成锯齿状，我不知道为什么。

我已经创建了一个JSBin，你可以在这里看到效果：http://jsbin.com/fadeyiva/1/edit

我已将背景颜色设置为黑色，以便您可以更轻松地看到画布和锯齿状边缘。灰色形状是画布，如果向下滚动到页面底部然后备份它应该触发航点并将画布颜色更改为橙​​色。

然而，如果你看到底部的对角线，当它变成灰色时会开始平滑，但是当它变色时，边缘变得非常锯齿状。我不知道为什么会这样，因为代码只是改变了fillStyle，它根本没有改变画布的形状。

Answer 1

原因是因为您的角度框最初是在画布上绘制的，这与抖动有关（这是本地照顾的）。当您按原样应用填充更改时，您会抛出抖动的想法，并简单地使对象的每个像素都具有相同的颜色。对象的边缘需要与背景混合（这就是抖动的意思）。

我建议不要只调整对象的填充值，而是像在window.onload()函数中那样重绘整个对象。因为您正在调用重绘，浏览器将强制对象进行抖动并将其调整为新颜色。