Windows 畫圖程式一直伴隨著Windows 各個版本,這個很簡單,幾乎沒有什麼用處的程式擁有最基本的繪圖功能,很適合用來塗鴉。 HTML5 的Canvas 物件使線上繪圖成為可能,雖然HTML5 還遠未成熟,但許多人已經迫不及待地用它設計一些令人驚嘆的應用程式。
CanvasPaint 是一個基於HTML5 的標準Windows 畫圖程序,它擁有和Windows 畫圖程式一模一樣的介面和操作,功能也幾乎完全一樣,在特定瀏覽器的支援下,你甚至可以將最後的作品保存到本機。這並不是最近的項目,2006年就有了,因此,目前絕大多數支援標準的瀏覽器(Firefox,Safari,Chrome,Opera)都可以正常使用這個程式。以下是作者對這個項目的一些解釋。
為什麼要開發這個程式?
目的不是為了開發Windows 畫圖程序,而是體驗HTML5 的Canvas 功能。
如何使用和標準Windows 繪圖程式一樣。
能保存嗎?
是的,但只支援Firefox 2 和Opera 9 (譯者註:這是作者2006年就實現的一個程式)。在本機儲存,選擇File 選單中的Download,線上儲存,選擇Save online,會自動產生一個URL 線上顯示你的作品。
瀏覽器本身的右鍵選單會影響使用可以在瀏覽器的設定中停用右鍵選單。
為什麼有些功能不能用?
一些功能支援特定版本的瀏覽器(譯者註:這是就2006年而言):
Color pickerFirefox 2.0Opera 9 Flood fillOpera 9 Save imageFirefox 2.0Opera 9 Open URLFirefox 1.5Opera 9Latest WebKit Canvas 物件好用嗎?
對那些不需要跨瀏覽器支援的應用很好用。但在繪畫中,最大的問題是,受限於mousemove 事件的刷新率,你不太容易發現遊標的位置,使用噴筆的時候尤其明顯。另外,當尺寸變得很大時,速度變得很慢,沒有getPixel() 功能。
技術細節程式中使用了5 個Canvas 物件。
一個主畫板,一個是透明畫板層浮動在上方顯示預覽繪畫內容,一個隱藏的Canvas 用來緩存選擇的內容,另一個用來緩存反悔狀態,一個用在程式標題欄,用來顯示漸變色。
其他人的HTML5 Canvas 實驗
Canvascape 3D (以HTML5 實現簡單的第一人稱射擊遊戲)
CanvasGraph (一個HTML5 Canvas 繪圖JavaScript 類別庫)
Image reflections (用HTML5 Canvas 實作影像倒影)
Canvas Painter (一個更為簡單的Canvas 畫圖程式)
真正令人讚嘆的HTML 畫圖程式如果上面的程式已經讓你對HTML5 的Canvas 功能感到鼓舞,下面這個畫圖程式會讓你讚嘆。擁有不輸桌面的介面體驗和流暢感,在多螢幕電腦上,我甚至有將那些浮動工具面板拖到第二個螢幕的衝動。
-