Firefox和Chrome上的HTML画布填充区别

本文介绍了Firefox和Chrome上的HTML画布填充区别的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

Consider the snippet below - available on jsFiddle: jsfiddle/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()