在清晰的畫布上繪製更清晰的文字

問題是ctx.fillText()產生的文字比正常網頁中顯示的文字要模糊不清。在this example中，右側的文本在畫布上生成，左側僅使用html。它來自這個問題Can canvas context.fillText be made crisp (because context.translate 0.5/0.5 doesn't)，但沒有回答這個問題，現在可能已經過時。在清晰的畫布上繪製更清晰的文字

我只需要輸出文本到一個清晰的畫布，我希望提高文本的質量。如果可以使文本更清晰，我願意逐像素地進行操作。問題是我不知道從哪裏開始。

來源

2015-01-26 user17739521

我試過的一件事是通過使畫布寬度/高度= 4倍的正常大小和風格它增加dpi（sorta）正確的尺寸。像''canvas width =「400」height =「400」style =「width：100px; height：100px」>「;'我通過一個DPI變量做了這個變量，它在繪製時與我的大部分寬度/所以我仍然可以以1：1的比例思考，但讓'var dpi = 4;'爲我做整個畫布上的所有縮放，不知道它是否會幫助你。 – 2015-01-26 20:32:36

取決於瀏覽器：左側的文本使用標準的ClearType渲染（至少在Windows上）渲染。在正確的字體反鋸齒是灰度。當背景不透明時，ClearType可以工作。

所以試着用一些不透明的顏色填充畫布。如果這不起作用，那麼這是特定引擎的特定字體渲染。

作爲Windows上的圖示：

這是Sciter字體呈現於固體背景： enter image description here 這是相同的文檔，但與背景：透明（Aero的Windows 7）

固背景使用ClearType（使用「在瀏覽器中的新標籤打開圖像」）

來源

2015-01-26 20:50:24

在清晰的畫布上繪製更清晰的文字

回答

相關問題