HTML5 canvas準備知識

標籤：style   blog   color   ar   使用   sp   div   on   log   

　　利用canvas來進行畫圖工作。因此，我們有必要進行一些畫圖方面的術語說明.

　　一、畫布

　　在日常生活中，如果我們要畫畫，可以找紙、板、畫布等等工具。而在網頁元素中，我們只需要定義一個標籤即可。

<canvas id="c" style="border:1px solid black;"><p>your browser is not support.</p></canvas>

　　其中，canvas就是一塊畫布，而標籤裡面的p，則是為相容低版本瀏覽器而使用。如果，你在訪問該頁面能夠看到p標籤裡面的內容，則說明，你當前使用的瀏覽器還不支援html5;相反，則是看到矩形。

　　使用畫布的方法:

var c = document.getElementById("c");

 

　　二、畫筆

　　在有了畫布之後，如果我們想要往其中塗鴉，則需要"畫筆"這樣的工具。

　　利用canvas來擷取畫筆的方法:

var ctx = c.getContext("2d");

　　其中getContext方法就是用來拿筆的，但這裡還有個參數:2d.其為預設傳遞的參數值。這是什麼意思呢?這個可以看作是畫筆的種類。

　　既然有2d，那麼就會有3d了？以後估計會有，但現在沒有。所以我們先用這隻2d的筆。

 

　　三、橡皮

　　在畫布，如果發現有些地方的內容需要去除的話，我們可以使用"橡皮"來進行操作。

　　利用canvas來使用橡皮的方法:

ctx.clearRect(X1,Y1,X2,Y2);

 

　　四、座標　

　　2d世界，就是平面，在一個平面上確定一個點，需要兩個值，x座標和y座標。這是一個很重要的基礎概念。

　　canvas的原點是左上方，跟網頁的定位是一致的。

 

　　五、路徑

　　利用座標點，成線。由線成面

HTML5 canvas準備知識