Javascript和Canvas：如何摆脱这种云纹&xE9；我的陀螺仪中的效应

只是出于好玩，我用Javascript和画布制作了那个小玩具陀螺。 不幸的是，它有一个丑陋的莫尔效应（见下面的截图）。

函数绘图（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.imageSmoothingEnabled=假；
变量颜色=[
[“蓝色”、“黄色”]，
[‘白色’、‘粉色’]，
[‘绿色’、‘红色’]，
[“白色”、“黑色”]，
[‘绿色’、‘蓝色’]，
[‘红色’、‘绿色’、‘蓝色’]
];
对于（变量i=0；i<12；i++）{
对于（变量cIdx=0，p=0；p<120；p+=20，cIdx++）{
var cols=颜色[cIdx]；
对于（var r=p；r

我想，莫尔效应来自于反走样。所以我想，我可以摆脱 当我用

ctx.imageSmoothingEnabled=false关闭抗锯齿时，会产生莫尔效应。
但是没有，什么都没有改变

有什么想法吗

谢谢，
伯恩哈德

这就是它的样子：
您可以增加上下文的线宽，例如ctx.lineWidth=2，这将解决莫尔效应

...
var ctx = c.getContext("2d");
ctx.imageSmoothingEnabled = false;
ctx.lineWidth=2;
...


但我认为你们的陀螺仪执行情况不是很好。您应该找到一种使用ctx.fillStyle和ctx.fill（）而不是ctx.strokeStyle来设置颜色的解决方案。
您看到的效果基本上是混叠，因此如果有任何问题，您应该启用抗混叠。但是，ImageSmoothInEnabled属性是，因此它在这里没有任何效果

例如，我建议您只绘制20px宽的同心圆，而不是绘制1px宽的同心圆，半径每增加20px，同心圆的颜色就会改变。这将解决锯齿效应，而且它还消除了一个内部循环，因此它应该更有效。这是一个更新的提琴-除了删除循环，我还调整了循环上的边界条件：


ctx.lineWidth=21；
对于（变量i=0；i<12；i++）{
for（var cIdx=0，r=10；r太棒了。是的，就是这样。感谢对for循环的优化。它现在绘制得更快了(
...
var ctx = c.getContext("2d");
ctx.imageSmoothingEnabled = false;
ctx.lineWidth=2;
...

ctx.lineWidth = 21;

for (var i = 0; i < 12; i++) {
    for (var cIdx = 0, r = 10; r <= 110; r += 20, cIdx++) {
        var cols = colors[cIdx];
        ctx.beginPath();
        ctx.arc(125, 125, r, (i - 1) * Math.PI / 6.0, i * Math.PI / 6.0);
        ctx.strokeStyle = cols[i % cols.length];
        ctx.stroke();
    }
}