Canvas入門基礎(chǔ)（一）：繪制基礎(chǔ)形狀

<canvas id="mycanvas" width="200" height="300">
   您的瀏覽器不支持canvas
</canvas>

<script>
    var cc=document.getElementById("mycanvas");
    var cxt=cc.getContext("2d");
</script>

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // 支持
} else {
  //不支持
}

fillRect( x ,y ,width, height)

strokeRect( x ,y ,width, height)

clearRect( x ,y ,width, height)

<script>
		var cc=document.getElementById("mycanvas");
		if(cc.getContext){
			var cxt=cc.getContext("2d");
			cxt.strokeRect(20,20,100,100);
			cxt.fillRect(40,40,50,50);
			cxt.clearRect(50,50,30,30);
		}
</script>

beginPath()

closePath()

stroke()

fill()

moveTo(x,y) 

lineTo(x,y) 

例子：

cxt.beginPath();
cxt.moveTo(150,150);
cxt.lineTo(150,250);
cxt.lineTo(300,250);
cxt.stroke();
cxt.closePath();

cxt.beginPath();
cxt.moveTo(400,400);
cxt.lineTo(400,500);
cxt.lineTo(500,500);
cxt.fill();
cxt.closePath();

五、弧線

繪制圓弧或者圓，我們使用arc()方法

arc(x, y, radius, startAngle, endAngle, anticlockwise)

畫一個(gè)以（x,y）為圓心的以radius為半徑的圓?。▓A），從startAngle開始到endAngle結(jié)束，參數(shù)anticlockwise 為一個(gè)布爾值。為true時(shí)，是逆時(shí)針方向，否則順時(shí)針方向。

注意：arc()函數(shù)中的角度單位是弧度，不是度數(shù)。角度與弧度的js表達(dá)式:radians=(Math.PI/180)*degrees。

例子：

cxt.beginPath();
cxt.arc(70,70,50,0,Math.PI/2,true);
cxt.stroke();

cxt.beginPath();
cxt.arc(180,70,50,0,Math.PI/2,false);
cxt.stroke();

cxt.beginPath();
cxt.arc(300,70,50,0,Math.PI/2,true);
cxt.fill();

cxt.beginPath();
cxt.arc(400,70,50,0,Math.PI/2,false);
cxt.fill();

六、貝塞爾（bezier）以及二次貝塞爾

路徑類型就是 貝塞爾曲線。二次以及三次貝塞爾曲線都十分有用，一般用來繪制復(fù)雜有規(guī)律的圖形。

• 繪制二次貝塞爾曲線，x,y為結(jié)束點(diǎn)，cp1x,cp1y為控制點(diǎn)。
  

quadraticCurveTo(cp1x, cp1y, x, y)

• 繪制三次貝塞爾曲線，x,y為結(jié)束點(diǎn)，cp1x,cp1y為控制點(diǎn)一，cp2x,cp2y為控制點(diǎn)二。
  

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

七、矩形

rect(x, y, width, height)

繪制一個(gè)左上角坐標(biāo)為（x,y），寬高為width以及height的矩形。

八、Path2D 對(duì)象

正如我們?cè)谇懊胬又锌吹降?，你可以使用一系列的路徑和繪畫命令來把對(duì)象“畫”在畫布上。為了簡(jiǎn)化代碼和提高性能，Path2D對(duì)象已可以在較新版本的瀏覽器中使用，用來緩存或記錄繪畫命令，這樣你將能快速地回顧路徑。

Path2D() Path2D()會(huì)返回一個(gè)新初始化的Path2D對(duì)象（可能將某一個(gè)路徑作為變量——?jiǎng)?chuàng)建一個(gè)它的副本，或者將一個(gè)包含SVG path數(shù)據(jù)的字符串作為變量）。

new Path2D();     // 空的Path對(duì)象
new Path2D(path); // 克隆Path對(duì)象
new Path2D(d);    // 從SVG建立Path對(duì)象

例子：

var path=new Path2D();
path.rect(120,120,50,50);
cxt.stroke(path);

Path2D.addPath(path [, transform])? 添加了一條路徑到當(dāng)前路徑（可能添加了一個(gè)變換矩陣）

使用 SVG paths

新的Path2D API有另一個(gè)強(qiáng)大的特點(diǎn)，就是使用SVG path data來初始化canvas上的路徑。這將使你獲取路徑時(shí)可以以SVG或canvas的方式來重用它們。

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

這條路徑將先移動(dòng)到點(diǎn) (M10 10) 然后再水平移動(dòng)80個(gè)單位 (h 80)，然后下移80個(gè)單位 (v 80)，接著左移80個(gè)單位 (h -80)，再回到起點(diǎn)處 (z)。