開始
canvas介紹
<canvas>是HTML5新增的元素，兼容性：IE9+、Firefox 1.5+、Safari 2+、Opera 9+、Chrome、iOS 版 Safari 以及 Android 版 WebKit 都在某種程度上支持<canvas>。canvas除了具備基本繪圖能力的 2D 上下文，<canvas>還有一個 WebGL 的 3D 上下文。
學習
2d上下文
首先，需要在html裏指定一個canvas標籤，指定標籤的寬高，如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas學習</title>
</head>
<body>
<canvas id="draw" width="400" height="400" ></canvas>
</body>
</html>
然後，我們獲取canvas元素，並獲取canvas元素的2d上下文：
var drawing = document.getElementById("draw"); //獲取canvas元素
var context = drawing.getContext("2d"); //獲取2d上下文
接下來，我們就可以用canvas的2d上下文的api來繪製矩形：
context.strokeStyle = "red"; //填充顏色
context.fillStyle = "#0000ff"; //描邊顏色
context.fillRect(10, 10, 50, 50) //繪製矩形
context.strokeRect(100, 100, 50, 50); //描邊矩形
context.fillStyle = "#ff0000"; //描邊顏色
context.fillRect(30, 30, 50, 50); //繪製矩形
context.clearRect(40, 40, 10, 10); //繪製空白矩形
繪製的效果如圖：
接下來，我們使用canvas提供的2d上下文api來繪製路徑，繪製路徑比繪製矩形要稍微複雜一點，主要思路就是我繪製一條一條的路徑，但是在繪製的時候不連線，只有最後在調用stroke方法的時候纔會連線：
context.beginPath() //繪製路徑，只畫線，stroke的時候繪製。
context.arc(100, 100, 99, 0, 2 * Math.PI, false); //繪製圓
context.moveTo(194, 100)//移動點，不繪製，防止繪製多餘線條。
context.arc(100, 100, 94, 0, 2 * Math.PI, false) //繪製圓
context.translate(100, 100) //改變座標原點
context.rotate(1); //先旋轉再 繪製，旋轉之前繪製的都無效。
context.moveTo(0, 0) //移動點，不繪製
context.lineTo(0, 15) //從上一點繪製到該點
context.moveTo(0, 0) // 移動點，不繪製
context.lineTo(35, 0) //從上一點繪製到該點
context.stroke() //開始繪製
繪製效果如下：
