HTML畫布填充差異

考慮下面的代碼片段 - 可以用的jsfiddle：http://jsfiddle.net/Xqu5U/2/HTML畫布填充差異

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

difference between canvas fill on chrome and firefox

它適用於谷歌瀏覽器如預期，但Firefox呈現的填充從最末弧形到第一個。上面的代碼片段如何更新才能讓Firefox完全像Chrome一樣繪製弧線？

來源

2012-12-27 imbrizi

-2

你沒有真正的東西怎麼辦呢？

這兩個瀏覽器的工作方式......

你總是可以用CSS用正確的命令，使其在設計它同...

轉到http://w3schools.com，找到你所需要的做這件事:)

祝你好運！

來源

2012-12-27 20:03:39

我的問題只是關於畫布。當然，這個例子中的紅點可以用CSS完成，但這個例子只是一個孤立版本的問題，我在一個使用canvas的更大的應用程序中發現了這個問題。 – imbrizi

我找到了一種讓它工作的方法：http://jsfiddle.net/Xqu5U/3/。基本上只需在for循環內添加ctx.closePath()。不知道這是最好的解決辦法，但...

來源

2012-12-29 19:01:57 imbrizi

我知道這是老問題，但對未來的參考：

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-16 01:49:56 nemcaninz

這是真的老了，但有人指出只是我在這裏。

問題是一個鉻錯誤（現在已經固定，因爲不確定的很長時間）。 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>

來源

2017-04-27 01:07:37 Kaiido

HTML畫布填充差異

回答

相關問題