当颜色变化时，在画布上形成锯齿形边缘

Question

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

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

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

但是，如果您看下面的对角线，它会在灰色时开始平滑，但当它变为颜色时，边缘变得非常锯齿状。我不知道为什么会发生这种情况，因为代码只是改变fillStyle，它根本不会改变画布的形状。

Answer 1

原因是因为你的斜角盒最初是在画布上对抖动进行绘制（这是本地处理的）。如果您按原样应用填充更改，则会抛出抖动的想法，并简单地使对象的每个像素都具有相同的颜色。物体的边缘需要与背景混合（即抖动意味着什么）。

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