Firefox和Chrome上的HTML画布填充区别 [英] HTML canvas fill difference on Firefox vs Chrome

问题描述

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

Consider the snippet below - available on 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一样绘制弧线？

It works as expected on Google Chrome, but Firefox renders a fill from the last arc to the first one. How can the snippet above be updated to get Firefox drawing the arcs exactly like Chrome?

推荐答案

我知道这是（''''）;但是对于将来的参考：

I know this is old question but for the future reference:

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()

这篇关于Firefox和Chrome上的HTML画布填充区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！