Javascript和Canvas:如何摆脱陀螺仪中的莫尔效应

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属性仅用于图案填充或drawImage,因此它在此处没有任何效果.

对于您的示例,我建议您只绘制20px宽的同心圆,而不是绘制1px宽的同心圆,每半径增加20px时会改变颜色.这将解决别名效应,它也会摆脱你的一个内部循环,所以它应该更高效.这是一个更新的小提琴 - 除了删除循环,我还调整了循环的边界条件:

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的lineWidth,因为它似乎留下1px宽的间隙(我不知道为什么).