javascript - 颜色变化时 Canvas 形状上出现锯齿状边缘

Question

我目前遇到一个问题，更改 Canvas 的 fillStyle 会导致平滑的对 Angular 线变成锯齿状，我不知道为什么。

我创建了一个 JSBin，您可以在其中看到效果:http://jsbin.com/fadeyiva/1/edit

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

但是，如果你看一下底部的对 Angular 线，它一开始是灰色的，但当它改变颜色时，边缘会变得非常锯齿状。我不知道为什么会发生这种情况，因为代码只是改变了 fillStyle，它根本没有改变 Canvas 的形状。

Answer 1

原因是因为您的倾斜框最初是在 Canvas 中绘制的，涉及抖动(这是 native 处理的)。当您按原样应用填充更改时，您就放弃了抖动的想法，只需使对象的每个像素具有相同的颜色即可。对象的边缘需要与背景融合(这就是抖动的意思)。

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