2

考虑下面的片段 - 在 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();

chrome和firefox上的画布填充之间的区别

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

4

4 回答 4

1

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

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()
于 2014-02-16T01:49:56.620 回答
1

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

于 2012-12-29T19:01:57.990 回答
0

它真的很旧，但有人刚刚指出我在这里。

问题是一个 chrome 错误（现在已修复，因为未确定很长时间）。FF 的行为是正确的。

arc()方法不包括moveTo(x, y)调用，而是调用lineTo。

因此，为了获得您想要的结果，您只需要调用要绘制的下一个弧的中心 x 和 y 坐标的ctx.moveTo(nextCX + radius, nextCY)位置nextCX和位置。nextCY我们添加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>

于 2017-04-27T01:07:37.840 回答
-2

你真的没有什么可做的...

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

您始终可以使用 CSS 和正确的命令来设计它，以使其相同......

去http://w3schools.com找到你需要做的事情:)

祝你好运 ！

于 2012-12-27T20:03:39.840 回答