Canvas入门基础（一）：绘制基础形状

<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)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，参数anticlockwise 为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式: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）以及二次贝塞尔

路径类型就是 贝塞尔曲线。二次以及三次贝塞尔曲线都十分有用，一般用来绘制复杂有规律的图形。

• 绘制二次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点。
  

quadraticCurveTo(cp1x, cp1y, x, y)

• 绘制三次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二。
  

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

七、矩形

rect(x, y, width, height)

绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。

八、Path2D 对象

正如我们在前面例子中看到的，你可以使用一系列的路径和绘画命令来把对象“画”在画布上。为了简化代码和提高性能，Path2D对象已可以在较新版本的浏览器中使用，用来缓存或记录绘画命令，这样你将能快速地回顾路径。

Path2D() Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）。

new Path2D();     // 空的Path对象
new Path2D(path); // 克隆Path对象
new Path2D(d);    // 从SVG建立Path对象

例子：

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

Path2D.addPath(path [, transform])​ 添加了一条路径到当前路径（可能添加了一个变换矩阵）

使用 SVG paths

新的Path2D API有另一个强大的特点，就是使用SVG path data来初始化canvas上的路径。这将使你获取路径时可以以SVG或canvas的方式来重用它们。

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

这条路径将先移动到点 (M10 10) 然后再水平移动80个单位 (h 80)，然后下移80个单位 (v 80)，接着左移80个单位 (h -80)，再回到起点处 (z)。