Canvas 教程

Canvas_tut_examples.jpg

<canvas> 是一種可以通過編寫腳本(通常是JavaScript)來實現繪製圖形的HTML元素。例如,它能用來繪製圖形,製作組合圖像或者生成簡單的 (偶爾 也不簡單) 動畫。右邊的圖像展示了<canvas>實現的一些例子,在接下來的教程中我們將會實現它們。

<canvas>第一次出現是被蘋果在Mac OS X儀表盤中實現,之後就被應用到Safari和谷歌Chrome中。Gecko1.8及以上的瀏覽器,比如火狐1.5,同樣也支持這個元素。<canvas>標籤是WhatWG Web applications 1.0標準化即HTML5的一部分。本教程從基礎入手,講述瞭如何使用<canvas>標籤來繪製2D圖像。提供的例子應該會使你瞭解你能夠通過canvas做到的事情並且將會提供一些幫助你開始建立自己的內容的代碼片段。


在你開始之前

使用<canvas>元素並沒有你想象的那麼難,但是你仍然需要對HTMLJavaScript有 一定的瞭解。<canvas>元素在某些過舊的瀏覽器中是不被支持的,但是所有主流瀏覽器的最新版本都已經支持了該元素。canvas的默認 大小是300像素*150像素(寬*高)。但是可以通過使用CSS寬高屬性來自定義其大小。爲了在canvas中繪製圖像我們會使用一個 javascript內容對象(javascript context object這應該如何翻譯),它將會創建一個動態圖像。


教程內容

相關資料


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章