Firefox strokeText參差不齊的工件

在FF中的strokeText（）的畫布渲染中存在一些問題。每當繪製的代碼大綱文本：Firefox strokeText參差不齊的工件

canvasCtx.font   = '36px impact'; 
canvasCtx.strokeStyle = '#000'; 
canvasCtx.fillStyle  = '#fff'; 
canvasCtx.lineWidth  = 4; 

canvasCtx.strokeText('DIG IN CEREAL', 20, 20);

鉻給我no artifacts。
FF給我鋸齒artifacts。

基本上這是呈現在畫布上，然後導出toDataUrl（）。任何人都知道解決方法/爲什麼鋸齒狀的工件只會在FF中發生？謝謝。

來源

2012-06-14 user1457384

Artifacts也出現在Opera中，所以我很猶豫，只是簡單地報告這是任何特定渲染引擎上的錯誤 –

有人剛剛在Opera論壇發佈了這個文章（http://my.opera.com/community/forums/ topic.dml？id = 1515822＆t = 1345656952＆page = 1）所以希望這會得到一些關注。你有報告Mozilla的錯誤嗎？ –

我在Chrome中看到了這個（使用KineticJS，但我認爲問題在於底層畫布），尤其是字母'w'。 – DaveWalley

那麼，我通過節點帆布serverside跑到這。由於我只是在孤立的事件中使用文本，所以我能夠在我的文本週圍剪切一個矩形，但它可能是特定於我的字體的。

x = 10 
    y = 10 
    @fontSize = 104 
    @context.font = 'bold ' + @fontSize + ' Arial' 

    @context.save() 
    @context.beginPath() 
    @context.rect x - @fontSize*.1, y - @fontSize*.68 - @context.lineWidth, @context.measureText(text).width + @fontSize * .2, @fontSize + @context.lineWidth 
    @context.clip() 
    @context.strokeText text, x, y 
    @context.fillText text, x, y 
    @context.restore()

所以，這是從CoffeeScript的拍攝片段，但你應該明白我的意思... save, clip, stroke/draw, restore。

你將不得不與*.1，*.775玩，等

你居然可以使矩形更大的水平部分（而不是.1，你可以使用的10，而是.2，使用20），因爲你並不擔心文物的正確與否。 .775確切的數字讓我去掉

的頂部

所以是的，一種黑客，但它解決了我的問題。

來源

2015-02-02 14:52:27 Funkodebat

Firefox strokeText參差不齊的工件

回答

相關問題