編輯:此版本在版本38中修復。Chrome arc路徑填充錯誤的解決方法?
最近的Chrome版本在我維護的應用程序中引入了一個問題。我不確定這是否是那些奇怪的「看起來錯誤但實際上是正確的」問題之一,或者它是一個誠實的上帝錯誤,但它只在最近版本的Chrome中出現(它開始發生在大約一個月前,我不確定究竟是哪個版本引入的)
在使用上下文arc()方法繪製的某些路徑上使用上下文fill()方法時,會出現該錯誤。填充的是一個奇怪形狀的多邊形,而不是繪製一個實心圓弧。
這裏是我的意思示範 - 右上角應該是一個充滿圓弧形狀:
var ctx = document.getElementById('cvs').getContext('2d');
// draw stroked arc
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI/2);
ctx.lineTo(125, 125);
ctx.closePath();
ctx.stroke();
// draw filled arc
ctx.beginPath();
ctx.arc(225, 75, 50, 0, Math.PI/2);
ctx.lineTo(275, 125);
ctx.closePath();
ctx.fill();
\t \t \t
// draw stroked triangle
ctx.beginPath();
ctx.moveTo(125, 225);
ctx.lineTo(75, 275);
ctx.lineTo(125, 275);
ctx.closePath();
ctx.stroke();
// draw filled triangle
ctx.beginPath();
ctx.moveTo(275, 225);
ctx.lineTo(225, 275);
ctx.lineTo(275, 275);
ctx.closePath();
ctx.fill();
<div><canvas id="cvs" width="300" height="300" style="border: solid black 1px"></canvas></div>
我的問題是:是否有針對此問題的解決方法嗎?最好不要我寫我自己的填充弧渲染器。
什麼版本的Chrome瀏覽器您使用的是?在這裏沒有看到任何問題 - 這是我得到http://oi61.tinypic.com/23wvt2.jpg – Cheery 2014-09-29 00:14:43
同樣在這裏FF31 Cheery(沒有邊界雖然)。 – mechalynx 2014-09-29 00:30:32
我已經看到在Windows的Chrome 37.0.2062.124以及適用於Android的Chrome 37.0.2062.117中出現該錯誤。 – slaufer 2014-09-29 00:56:14