HTML画布填补了Firefox与Chrome的区别

Question

考虑下面的代码段 - 可在jsFiddle：http://jsfiddle.net/Xqu5U/2/

上找到

ctx = document.getElementById('canvas').getContext('2d');
ctx.beginPath();
ctx.fillStyle = '#FF0000';

for (var i = 0; i < 20; i++) {
    ctx.arc(i * 10, 50 + Math.sin(i * 0.5) * 15, 2, 0, Math.PI * 2);
}

ctx.fill();

它在Google Chrome上按预期工作，但Firefox会从最后一个弧渲染到第一个弧。 如何更新上面的代码段以使Firefox完全像Chrome一样绘制弧线？

Answer 1

我找到了让它运转的方法：http://jsfiddle.net/Xqu5U/3/。 基本上只需在ctx.closePath()循环中添加for即可。不确定这是否是最好的解决方案......

Answer 2

我知道这是一个老问题，但将来参考：

ctx = document.getElementById('canvas').getContext('2d');
ctx.beginPath()
ctx.fillStyle = '#FF0000'

for (var i = 0; i < 20; i++) {
    ctx.arc(i * 10, 50 + Math.sin(i * 0.5) * 15, 2, 0, Math.PI * 2)
    ctx.closePath()
}

ctx.fill()

Answer 3

这真的很古老，但有人只是指着我到这里来。

问题是一个铬虫（现在已经修复了很长时间）。 FF行为是正确的。

arc()方法不包含moveTo(x, y)来电，而是lineTo方法。

因此，为了获得所需的结果，您只需致电ctx.moveTo(nextCX + radius, nextCY)，其中nextCX和nextCY是您下一个弧线的中心x和y坐标。我们将radius添加到x位置，因为当弧的起始角度设置为0时，弧从3点开始绘制，没有+ radius，我们仍然会有正在添加内部lineTo(cx + radius, cy)，在调用stroke()时可见。

var ctx = document.getElementById('canvas').getContext('2d');

ctx.beginPath();
ctx.fillStyle = '#FF0000';
for (var i = 0; i < 20; i++) {
    // you need to moveTo manually.
    ctx.moveTo(i * 10 + 2, 50 + Math.sin(i * 0.5) * 15)
    ctx.arc(i * 10, 50 + Math.sin(i * 0.5) * 15, 2, 0, Math.PI * 2);
}
ctx.fill();

<canvas id="canvas"></canvas>

Answer 4

你真的无所事事......

这是两种浏览器的工作方式......

你可以随时使用CSS设计它，并使用正确的命令使它变得相同......

转到http://w3schools.com并找到执行此操作所需的内容：）

祝你好运！