只是出于乐趣,我使用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
。但是,没有任何变化。
有任何想法吗?
谢谢伯恩哈德
看起来是这样的:
您基本上看到的效果是混叠,因此,如果有的话,您将希望启用抗混叠。但是,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] 删除。
我来说两句