本文介绍了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()更多推荐
Firefox和Chrome上的HTML画布填充区别
发布评论