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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文中的相關(guān)代碼實現(xiàn), 將在之后的幾篇文章中放出.

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。