Canvas留下的坑遠比我想象中的要多, 最近碰上一個很少見的需求——在Canvas上繪制大小小于12px的文字.

如果只是簡單的去設定context的font屬性, 來繪制點陣字體, 比如7px的宋體, 出來的效果是這樣的(Chrome):

正如你看到的, 這顯然不是7px, 如果你再次訪問font屬性, 就會發現font被強制改回了12px大小. 我們知道, Chrome早在2年前就限制了中文字體的最小尺寸為12px, 但令我沒想到的是, Canvas竟然也享受同等待遇.

在Photoshop CS6里, 7px的宋體是這樣的:

雖然從辨識度的角度來說很差, 但實際上這才是我想要的結果.

Google查了一圈回來, 也只能找到像"-webkit-text-size-adjust"(文字字體大小限制, 該CSS屬性在Chrome 27版本中已被取消)、"image-rendering"(調整瀏覽器渲染縮放圖像質量的CSS屬性, 與文字不相干)、"Context.imageSmoothingEnabled"(決定進行Context.drawImage等操作時是否啟用抗鋸齒的屬性)之類的東西, 然而它們都不能解決我們的需求.

我嘗試的第一種方案是使用drawImage把文字作為圖像繪制, 縮放所使用的算法取決于瀏覽器, 也就是說會受到imageSmoothingEnabled的影響.

默認情況下, imageSmoothingEnabled的值為true, 繪制出的圖像會受到抗鋸齒算法的影響:

文字整體不可避免的有點發虛, 但辨識度得到了一定程度的提升.

這是imageSmoothingEnabled值為false時, 繪制出的圖像:

事實上比較接近PhotoShop的結果, 但由于縮放算法的關系, 文字整體沒有很好的保留下來. 同時, 這種縮放結果不受CSS屬性"image-rendering"的影響, 對于縮放使用的算法, 開發者無法控制.

之后我自己實現了最近鄰插值算法(Nearest-neighbor interpolation)對圖像進行縮放, 效果如下:

由于是使用fillRect進行像素的填充, 所以在縮放倍數低于1時, 繪制出的圖像會明顯發虛.

改用putImageData合成圖像后, 可以得到只有黑白兩種顏色的二值圖像:

文字整體丟失得很嚴重, 不知道是不是我在這個算法的理解上有偏差. 看來最簡單的最近鄰插值是沒法完成我們的需求了(PS: 最近鄰插值法在我嘗試放大文字時表現很好).

于是我又嘗試實現了復雜度稍高一點的雙線性插值算法(Bilinear interpolation):

效果算是很不錯的, 但是由于使用了fillRect, 所以顏色不對.

用putImageData合成圖像的效果如下:

這個算法的效果和imageSmoothingEnabled=true時使用drawImage得出的結果十分接近, 除了邊緣由于算法的問題虛化了一部分像素外, 整體是要好于瀏覽器的縮放的.

接下來打算再實現Photoshop CS6縮小文字使用(個人猜測)的雙三次插值算法(Bicubic interpolation), 應該會得到比較滿意的效果.

文中的相關代碼實現, 將在之后的幾篇文章中放出.

總結

以上是生活随笔為你收集整理的canvas中文显示乱码 html5_浅析HTML5 Canvas的几种中文字体缩小方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。