## 關于canvas
Canvas可以說是HTML5中最強大的功能之一。使用它，除了可以實現基礎的繪圖畫板外，最讓人驚喜的是，配合簡單的計時器或動畫API，我們還可以開發出酷炫的圖表、流暢的游戲等豐富的功能。
**什么是canvas**
`<canvas>`是一個可以使用腳本(通常為JavaScript)在其中繪制圖形的 HTML 元素。
> `<canvas>` 元素不被一些老的瀏覽器所支持，但是所有的主流瀏覽器的近期版本都支持。
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 `<canvas> `元素. 注意: Internet Explorer 8 及更早 IE 版本的瀏覽器不支持 `<canvas>` 元素。
**模板骨架**
```
<canvas id="mycanvas" width="200" height="300">
您的瀏覽器不支持canvas
</canvas>
<script>
var cc=document.getElementById("mycanvas");
var cxt=cc.getContext("2d");
</script>
```
`<canvas>` 標簽只有兩個屬性—— width和height，這兩個屬性是可選的。當我們沒有定義時，Canvas 的默認大小為300像素×150像素（寬×高，像素的單位是px）。但是，我們也可以使用HTML的高度和寬度屬性來自定義尺寸。
**canvas尺寸**
canvas元素有兩套尺寸：一個是`元素本身的大小`(通過CSS設置)，另一個是`元素繪圖表面的大小`(通過canvas自身的`width`和`height`屬性設置)。
注意：通過CSS修改`width`和`height`，只是改變了元素本身大小，對元素繪圖表面的大小并無影響;而通過修改屬性`width`和`height`，則會同時改變元素本身大小和繪圖表面大小。
你可以像給其他DOM元素一樣給canvas添加樣式；當開始時沒有為canvas規定樣式規則，默認背景色與其父元素一致。
注意：由于某些較老的瀏覽器（尤其是IE9之前的IE瀏覽器）或者文本瀏覽器不支持HTML元素"canvas"，在這些瀏覽器上你應該總是能展示替代內容，如上面例子中的"您的瀏覽器不支持canvas"，或者你可以加一個img。 當然，對于那些支持`<canvas>`的瀏覽器，它將會忽略在容器中包含的內容，并且只是正常渲染canvas。
當然，你也可以用代碼去檢測canvas的支持性：
```
var canvas = document.getElementById('tutorial');
if (canvas.getContext) {
var ctx = canvas.getContext('2d'); // 支持
} else {
//不支持
}
```
**使用 JavaScript 來繪制圖像**
在真正學習繪制圖像之前，我們有必要了解一下Canvas坐標。
canvas是一個二維網格，以左上角坐標為(0,0)，如下圖所示：
了解了canvas坐標后，我們開始繪制圖像，可以分三步：
- 找到canvas元素
- 創建context對象
`<canvas>` 元素有一個`getContext() `的方法，這個方法是用來獲得渲染上下文和它的繪畫功能。
`getContext()`只有一個參數，上下文的格式：
```
ctx.getContext('2d');
```
