Posts tagged with canvas

Load Cufón font dynamically

前陣子我曾實驗利用 Cufón 在網頁上嵌入中文字型，當時的實驗結果是中文字型轉換為 JavaScript 格式，再經過 gzip 壓縮後，其大小雖然已經比原來的 TrueType 檔案小———以微軟正黑體為例，原始字型檔為 14 MB，經轉換後為 5.3 MB———但對於網路傳輸而言仍然過大，因此無法實際使用。

最近發現 Google App Engine 的大量傳輸 API 已經開放了，於是試著寫個東西來玩。我把 Cufón 字型的每個 Glyph 個別儲存到 Datastore，然後根據頁面的實際需要，重組成僅含所需字集的新檔案，藉此縮小所需傳輸的檔案大小。

 字型檔案大小
使用 gzip 壓縮不使用 gzip 壓縮
範例1：載入完整字型 10.5 MB 34.1 MB
範例2：只載入所需的字集 22.3 KB 61.4 KB

目前的作法是把需要的字集直接用 GET 告訴伺服器，但這樣未來可能會遇上 GET 長度限制問題…… 我想到的解法是可改用 JavaScript 載入這個檔案，用 POST 傳遞字集資訊，同時或許也能用 JavaScript 自動整理出所需的字集（目前是用手動整理 :p）。

Canvas experiment #1 : Polar Chart

Canvas experiment #1 : Polar Chart
Canvas experiment #1 : Polar Chart


看見謝老在玩 <canvas> ，因此引發我的興趣，於是就跟著也寫了一個產生星狀圖的程式———前八張圖的值是隨機的，後四張則是固定的。如果要挑 bug 的話，就是視窗改變大小後，圖形可能會換行，但數值的位置不會隨著圖形改變，要按重新整理才會更新。

Canvas 中畫弧的 method 使用的角度單位是弧度，因此要用三角函數計算，讓我複習了不少三角函數，過去學了不知道有什麼用的三角函數，終於在這次派上用場，看著 JavaScript 中充斥著數學計算式真是有成就感 XD

Canvas 沒有寫字的 method ，這一開始讓我覺得滿奇怪的。有些人是先建立一個暫時的 HTML 物件，再將其上的文字複製過來，但我後來覺得直接使用 HTML 物件就很好啦！我猜 Canvas 不內建寫字的 method 也是考慮到這點。

好久沒有像這樣不用管瀏覽器支援程度，寫沒有用的東西來玩了，感覺好舒暢啊！

※ Firefox 1.5 / Safari 1.3 / Opera 9 以上版本才支援 Canvas 。