HTML5-canvas畫布
（1）canvas
width、height和style裡面的width、height一樣嗎?
如果直接設定canvas的width和height：畫布和元素的寬度是你設定的值
如果設定的是style裡面的width和height，它僅表示canvas元素佔文件流的位置，這時候畫布的寬度和高度都是預設值分別是600，300。
注意：設定canvas的寬度的直接設定canvas的width和height屬性，如果需要放大canvas畫布，設定的CSS width和height應該和canvas的width和height屬性值，比例保持一致，說白了就是對比縮放。
（2）座標系
座標的圓點是在左上角
定義畫布的大小是style的屬性，而定義畫布的畫素是canvas特有的width，height屬性
var canvas= document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;
var context = canvas.getContext("2d");
context.moveTo(100,200);//移動原點，起始位置context.lineTo(50,300);//目標位置context.lineWidth = 10;//畫筆的粗細context.strokeStyle = "red";//畫筆的樣式context.stroke();//開始畫畫
canvas是內聯元素
畫園
context.arc(200,200,100,800,1
引數：（圓心X，圓心Y，半徑，起始角度，目標角度，畫的方向【可選】）預設的是順時針（false）
（3）描邊和填充
stroke（描邊）fill（填充）
（4）常用方法
getContext("2d")：獲取渲染的上下文，說白了 獲取畫筆,後面的引數固定寫“2d”
var context= canvas.getContext("2d");
moveTo(x,y):移動畫筆的位置，後面帶兩個引數
context.moveTo(250,150);
lineTo(x,y)：加一條線，引數是線的終點位置
context.lineTo(250,300);
和線條相關的屬性
lineWidth = 1;線的寬度
strokeStyle 線條的顏色
stroke()繪製線條
clearRect()關閉路徑 也就是回到起點
fillStyle：這是屬性 設定屬性填充的顏色一般填顏色就可以
ctx.fillStyle= "yellow";
fill():完成填充操作
ctx.fill();
beginPath()方法開始一條路徑，或重置當前路徑
beginPath()
arc(x，y，r，start，end，direction)繪製一個弧。前面兩個引數組成圓心的座標，第三個引數r半徑。第四個引數：start起始的弧度，第五個引數end結束的弧度，最後一個引數direction，繪製方向，true：逆時針方向，false：順時針方向，該預設是false
context.rect（x，y，w，h）繪製矩形（x，y）是矩形左上角的座標位置，w：矩形的寬度 ， h：矩形的高度。