Javascript 和 Canvas : How to get rid of that Moiré effect in my gyroscope

Question

出于乐趣，我使用 Javascript 和 Canvas 制作了那个小玩具陀螺(陀螺仪？)。不幸的是，它有一个丑陋的莫尔效应(见下面的截图)。 http://jsfiddle.net/8bac4s9v/1/

function draw() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.imageSmoothingEnabled = false;

    var colors = [
        ['blue', 'yellow'],
        ['white', 'pink'],
        ['green', 'red'],
        ['white', 'black'],
        ['green', 'blue'],
        ['red', 'green', 'blue']
    ];

    for (var i = 0; i < 12; i++) {
        for (var cIdx = 0, p = 0; p < 120; p += 20, cIdx++) {
            var cols = colors[cIdx];
            for (var r = p; r < p + 20; r++) {
                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();
            }
        }
    }
}

我猜，莫尔效应来自抗锯齿。所以我想，我可以摆脱当我使用 ctx.imageSmoothingEnabled = false 关闭抗锯齿时出现的莫尔效应。但是没有，什么都没有改变。

有什么想法吗？

谢谢，伯恩哈德

它是这样的:

Answer 1

您看到的效果基本上是 锯齿，因此如果有的话，您可能希望启用 抗锯齿。但是，imageSmoothingEnabled 属性是 only used for pattern fills or drawImage ，所以它在这里没有任何作用。

对于您的示例，与其绘制半径每增加 20 像素会改变颜色的 1 像素宽的同心圆，我建议您只绘制 20 像素宽的同心圆。这将解决混叠效应，并且还摆脱了您的内部循环之一，因此它应该更有效一些。这是一个更新的 fiddle - 除了删除循环之外，我还调整了循环的边界条件:

http://jsfiddle.net/foskc95k/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();
    }
}

另请注意，我实际上使用的是 21px 而不是 20px 的线宽，因为否则它似乎会留下 1px 宽的间隙(我不确定为什么)。