canvas這個標籤指的是在html上畫圖，他跟一般標籤沒兩樣，就是一個<canvas></canvas>放在<body>標籤裡頭。canvas指的是帆布，總之就是布啦，意思就好像你把一塊布蓋在你的網頁上，因此，canvas這個標籤，指的是一個"區域"(就好像flash的舞台一樣，一個能讓你畫圖的區域一樣)，並不是指一個canvas就是一個圖像。
當然啦，用canvas繪圖對我來講，聽起來也不是一件簡單的事，因為他也不像ai或ps一樣有鋼筆甚麼的可以用，相對於<canvas>而言，少了那隻"筆"，是用一句一句的語法來取代。
canvas標籤在html上有幾個重點 :
A.一個html可以有好幾個canvas，用id來指定他的屬性。
B.還可以設定每個canvas的寬與高，跟一般的語法沒兩樣，一樣是width="???" height="???"。
C.你也可以不要指定canvas的寬跟高，但，canvas是有預設的大小的，如果你都不設定，他原本的設定值是300X150，假如你畫的圖大於這個大小，是看不到超出的部分。
D.還有必須搭配 javascript 使用
E.製圖的區域是一個座標系統，(0,0)是左上角
F.現在還是很多瀏覽器沒有支援html5，硬要使用的話，就是畫面甚麼都沒有，所以只能在javascript下if使之出現alert視窗告知觀看者"你的版本不支援"。恩..只能這樣了~
綜合以上的龜毛重點，所以，這個html檔第一句一定是<!DOCTYPE HTML>告訴瀏覽是這是html5，這是必要的，因為canvas是在html5才出現的，然後再<body>標籤裡頭 加入<canvas>標籤，開始準備製圖。
<body>
<canvas></canvas>
</body>
這個嘛!<cancas>標籤怎麼可能這麼簡陋呢?還要給他id或是寬跟高的屬性之類的，像
<canvas id="circle" width="500" height="500"></canvas>
這樣子就是給定了一個繪圖區域，但是怎麼畫出圖來，實際上畫圖的工作是交給javascript去處理。 照上面的例子，這個html檔目前只有這樣:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>circle</title>
</head>
<body >
<canvas id="circle" width="500" height="500"></canvas>
</body>
</html>
這時候如果F12出去瀏覽絕對是甚麼都看不到的，為甚麼呢?
1.目前只是單純的指定畫布的區域而已，並沒有開始畫。
2.若要繪圖須下javascript，或是利用css指定canvas的邊框(border)等等。
待續...
參考資料:
RGB色票表http://www.wahart.com.hk/rgb.htm
當然啦，用canvas繪圖對我來講，聽起來也不是一件簡單的事，因為他也不像ai或ps一樣有鋼筆甚麼的可以用，相對於<canvas>而言，少了那隻"筆"，是用一句一句的語法來取代。
canvas標籤在html上有幾個重點 :
A.一個html可以有好幾個canvas，用id來指定他的屬性。
B.還可以設定每個canvas的寬與高，跟一般的語法沒兩樣，一樣是width="???" height="???"。
C.你也可以不要指定canvas的寬跟高，但，canvas是有預設的大小的，如果你都不設定，他原本的設定值是300X150，假如你畫的圖大於這個大小，是看不到超出的部分。
D.還有必須搭配 javascript 使用
E.製圖的區域是一個座標系統，(0,0)是左上角
F.現在還是很多瀏覽器沒有支援html5，硬要使用的話，就是畫面甚麼都沒有，所以只能在javascript下if使之出現alert視窗告知觀看者"你的版本不支援"。恩..只能這樣了~
綜合以上的龜毛重點，所以，這個html檔第一句一定是<!DOCTYPE HTML>告訴瀏覽是這是html5，這是必要的，因為canvas是在html5才出現的，然後再<body>標籤裡頭 加入<canvas>標籤，開始準備製圖。
<body>
<canvas></canvas>
</body>
這個嘛!<cancas>標籤怎麼可能這麼簡陋呢?還要給他id或是寬跟高的屬性之類的，像
<canvas id="circle" width="500" height="500"></canvas>
這樣子就是給定了一個繪圖區域，但是怎麼畫出圖來，實際上畫圖的工作是交給javascript去處理。 照上面的例子，這個html檔目前只有這樣:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>circle</title>
</head>
<body >
<canvas id="circle" width="500" height="500"></canvas>
</body>
</html>
這時候如果F12出去瀏覽絕對是甚麼都看不到的，為甚麼呢?
1.目前只是單純的指定畫布的區域而已，並沒有開始畫。
2.若要繪圖須下javascript，或是利用css指定canvas的邊框(border)等等。
待續...
參考資料:
RGB色票表http://www.wahart.com.hk/rgb.htm
