一、Canvas 應用場景

1.遊戲

2.圖表

3.動畫

4.codepen.io （HTML5 動效） 最早

二、Canvas 發展歷史

1.最早在apple的safari  1.3中引入

2.ie9之前的瀏覽器不支援Canvas

3.http://caniuse.com/

三、如何使用Canvas

1.新增canvas標籤

<canvas width=500 height=500></canvas>

2.獲得canvas元素

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

3. 獲得canvas上下文物件

var ctx = canvas.getContext('2d')

兩個物件

1. 元素物件（canvas元素）和上下文物件（通過getContext('2d')⽅方法獲取到的CanvasRenderingContext2D物件）

2. 元素物件相當於我們的畫布，上下文物件相當於畫筆， 我們接下來的所有操作是基於上下文物件的

繪製線段

1.ctx.moveTo(x, y); 移動到 x，y座標點

2.ctx.lineTo(x, y); 從當前點繪製直線到x，y點

3.ctx.stroke();描邊

4.ctx.lineWidth = 20; 設定線段寬度

5.ctx.closePath(); 閉合當前路徑 和回到起始點的區別

6.ctx.fill(); 填充

路徑與填充

1.fill和stroke方法都是作用在當前的所有子路徑

2.完成一條路徑後要重新開始另一條路徑時必須使用beginPath()方法, betinPath開始子路徑的一個新的集合

繪製矩形

1.ctx.rect(x, y, dx, dy);

2.ctx.fillRect(x, y, dx, dy);

3.ctx.strokeRect(x, y, w, h);