鐵人檔案
前言 上次參加已經是前年，去年懶惰癌發作沒有參加，其實今年原本也想找各種藉口不參加～但是這次剛好卡在換工作之際，9月剛好是一名無業遊民，如果不參加我怕對不起我爸...
<canvas> 基本介紹 <canvas>是一個html5的tag，可以形容為一個畫布容器，本身無繪製能力，需要利用javascrip...
繪製圖形 網格(座標空間)概念 在繪圖之前，需先了解<canvas>網格(或是說座標空間)，如下圖網格上一單位相當於畫布上的1px，網格原點在左上角...
繪製圖形 路徑繪製 使用路徑畫圖形會比較多步驟，基本上會包含以下步驟：【step 1】 beginPath():產生路徑，每一次呼叫就會產生一個路徑，路徑會被存...
顏色與樣式 顏色 屬性 描述 fillStyle = color 設定填滿圖形時用的顏色 strokeStyle = color 設定圖形邊框...
繪製文字 文字 方法 描述 fillText(textToDraw, x, y [, maxWidth]) 填滿文字。textToDraw是文字內...
使用影像 <canvas>也可以使用影像呈現圖片或作為背景，只要是瀏覽器支援的圖片格式都可以支援，ex.PNG、GIF、JPG或是同一頁面其他畫布產...
變形效果 在使用變形效果以前，通常會先儲存畫布，以下為畫布的儲存和復原方法： 畫布狀態儲存與復原 方法 描述 save() 儲存現階段畫布狀態...
合成效果 之前的範例可以看到後來畫的圖形如果位置重複就會覆蓋在前面畫出的圖形上，而canvas也有globalCompositeOperation這個屬性處理這...
做個小畫家 在進入動畫階段以前，讓我做個小小的範例～看到網路上很多人都用canvas做小畫家，沒創意如我想說也來用前幾天學到的那些基本觀念來試試看～ 小畫家功能...
