Chrome中的鋸齒形畫布渲染

我正在使用HTML畫布編寫繪圖應用程序。爲了順利畫線，我每次mousemove事件後填充了一系列二次曲線的：Chrome中的鋸齒形畫布渲染

ctx.beginPath() 
    ctx.moveTo(mx1-halfLastWidth*sin(angle), my1-halfLastWidth*cos(angle)) 
    ctx.quadraticCurveTo(mx1-lastWidth*cos(angle), my1+lastWidth*sin(angle), 
     mx1+halfLastWidth*sin(angle), my1+halfLastWidth*cos(angle)) 
    ctx.quadraticCurveTo(xl+halfMidWidth*sin(angle), yl+halfMidWidth*cos(angle), 
     mx2+halfCurrentWidth*sin(angle), my2+halfCurrentWidth*cos(angle)) 
    ctx.quadraticCurveTo(mx2+currentWidth*cos(angle), my2-currentWidth*sin(angle), 
     mx2-halfCurrentWidth*sin(angle), my2-halfCurrentWidth*cos(angle)) 
    ctx.quadraticCurveTo(xl-halfMidWidth*sin(angle), yl-halfMidWidth*cos(angle), 
     mx1-halfLastWidth*sin(angle), my1-halfLastWidth*cos(angle)) 
    ctx.fill()

完整的示例：http://jsfiddle.net/PfzM2/2/（還有很多不相關的代碼，因爲這是從一個更大的項目中提取到）

線條渲染非常順利在Firefox，但在Chrome的地方似乎「鋸齒」：

enter image description here

該系列發給瀏覽器的命令和參數是相同的。

我該如何讓Chrome瀏覽器呈現像Firefox這樣的行？

來源

2012-06-15 user686782

在http://jsfiddle.net/上發佈演示，以便我們可以對其進行測試。 – Blender

好的，發佈到http://jsfiddle.net/PfzM2/2/ – user686782

在Chrome瀏覽器中完美地工作：http：//i.imgur.com/hN3Hx.png。（我在64位Linux上運行Chrome 21） – Blender

在字體渲染方面，各地都有人問過類似的問題。它幾乎可以肯定是可能是相同的根本問題：渲染引擎產生的抗鋸齒差異。如你所知，Chrome會使用Webkit; FF，壁虎。 Gecko似乎比Webkit更喜歡反鋸齒。

將它歸結爲一個瀏覽器問題（我認爲你通常會對IE瀏覽器的方式）。

編輯：似乎逆向也被稱爲是真的。 Nick Heer在his blog中對此進行了討論：「由於Gecko的反鋸齒更加精確（而且更爲嚴格），大多數襯線的人臉看起來不太好。」可能是平臺問題。

來源

2012-06-15 02:06:34 whiskeySteve

Chrome中的鋸齒形畫布渲染

回答

相關問題