Canvas

  • Posted by Beata on 十月 18th, 2006 filed in javascript

剛剛收 GoogleReader 時不小心晃到一個 Blog，我對於它頁面下方的圖片倒影很感興趣。原本以為那是圖片本身的效果，但又覺得應該沒有人會閒到替每張圖片製作倒影。

用 firebug 偷偷看了一下，發現這些倒影是由一個叫 canvas 的標籤所產生。

好神奇的標籤！竟然能聰明的繪製出倒影漸層。

為了知道 canvas 的運作原理，跑去翻 Mozilla Developer Center，正好找到 Canvas tutorial。

原來 canvas 是一個新的 html 元素，用來做為程式碼繪圖的畫布。而且 JavaScript 就能設定各項繪圖指令。不過在 IE 下必須加載 這個 js 才能顯示效果。

大致上的步驟是先取得畫布，也就是 canvas 標籤；
如果 canvas 標籤的 id 是設為 canvas 的話，就是這樣
var canvas = document.getElementById('canvas');

再來就是定義 2D 繪圖環境（canvas 也支援 3D 繪圖環境）
var ctx = canvas.getContext("2d");

之後就能利用 ctx 變數執行各種繪製指令。指令大概分這幾類：

繪製基本形狀
- 線段、矩形、圓形、拉路徑
處理圖片
- 直接在圖上繪製物件、將圖片拼貼、或裁切圖片
樣式及色彩
- 這很妙，指定填充色彩、輪廓色彩、透明度、線段樣式、漸層等資訊
物件的變化方式
- 可以設相對移動方向、旋轉角度、縮放比率
物件的合成方式
- 設定物件相交的表現方式
基本動畫
- 最下面的其他示範有幾個遊戲 demo 很有趣

另外 google 了一下還找到這個倒影效果的 JavaScript Reflection.js 1.6


7 Responses to “Canvas”

  1. JellyCatz果凍喵 Says:
    十月 18th, 2006 at 11:06 上午

    看到這東西…感覺真是棒XD~ 不過腦中想到的第一個應用方式是把檢核碼用這東西代替~ 就可以節省Server的圖形輸出量~ but想一想…會有被破解的風險哩|||
    :P 來改看看~ 自動套用於特定版面的所有img語法~

  2. JellyCatz果凍喵 Says:
    十月 18th, 2006 at 2:20 下午

    嘗試了一下弄不太出來||| 懶喵喵有辦法抓到網頁內所有的img tag然後丟給Reflection嗎?

  3. Beata Says:
    十月 18th, 2006 at 7:21 下午

    reflection 我還沒用耶

    應該是在載入reflection之前先用js替每個img設class
    這樣reflection就會知道每個標籤的class
    但我沒實際試過..你試試吧

    
var imgs = document.getElementsByTagName('IMG');
for (var i=0; e=img[i]; i++  ) {
	e.className = 'reflect rheight33';
}
  4. JellyCatz果凍喵 Says:
    十月 19th, 2006 at 12:21 上午

    ok了~ 之前是小小的關鍵地方不知道怎樣寫|||~ 現在可以用了~ 也有嘗試改Id替換(畢竟css常用的是class判別)~ 結果程式會無窮迴圈掛點(判定本身它就是用class來處理有關)~ 所以還是弄class好哩~ 來寫文~ 感謝懶懶喵 :P

  5. 赵永明 Says:
    十月 23rd, 2006 at 11:33 上午

    偶遇懒懒猫，发现还是一女生！
    竟然对script这么感兴趣，有点特别，呵呵。
    你说的这个canvas,我也发现过，但现行的浏览器支持不大好，还是用来学习一下比较好，要普遍的应用还是等到主流浏览器把cancas纳入进去再说吧，呵呵。
    很有兴趣认识你一下，我的skype zym500,以后会经常光顾你的blog~

  6. Beata Says:
    十月 24th, 2006 at 12:55 上午

    script的世界真的很有趣
    尤其這兩年總是有意想不到的應用出現

    不過很不巧我沒用skype，真是抱歉。
    我比較慣用的im是msn，而且常常就掛在線上恍神..

    另外我想，目前而言使用 canvas 應該不算是太難的事情

    除了 IE 要另外加載js才能跑及 opera 偶爾不靈之外

    Gecko1.8以上的瀏覽器都支援良好(firefox,mozilla,flock,等等)

    Safari不用說了。canvas 應用就是它帶頭的。
    而 Camino 的最新版本也開始支援 canvas

    Konqueror 就沒有實測過，還不敢說..
    Galeon 雖然也是使用 Gecko核心，不過版本不明，要再找找有沒有相關資料

    至於 lynx…:骷髏:
    哈，我拿出來開玩笑的啦！
    它是純文字瀏覽器…
    永遠不可能支援的。

  7. isong榮耀» a cool html element for picture.nice ^^ Says:
    十月 27th, 2006 at 10:46 上午

    [...] 发现这个新的html标签是在一个美女coder的blog中， 这个标签能实现很多的图形效果，其中为图片添加渐层的倒影效果，我觉得很实用，而且符合我的喜好。所以决定去研究一下这个新贵。 [...]

Leave a Comment