Javascript和Canvas:如何消除陀螺仪中的摩尔纹效应

伯尼

只是出于乐趣,我使用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但是,没有任何变化。

有任何想法吗?

谢谢伯恩哈德

看起来是这样的: 在此处输入图片说明

谢尔盖·K

您基本上看到的效果混叠,因此,如果有的话,您将希望启用抗混叠。但是,imageSmoothingEnabledEnabled属性仅用于图案填充或drawImage,因此在这里没有任何作用。

在您的示例中,我建议不要绘制1px宽的同心圆,该半径会随着半径每增加20px而改变颜色,而是建议您只绘制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的lineWidth而不是20px,因为否则它似乎留有1px的宽度(我不确定为什么)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章