1.canvas標(biāo)簽
<canvas id="canvas">
你的瀏覽器不支持canvas，請升級瀏覽器.
</canvas>
2.canvas繪圖上下文context
var canvas = document.getElementById( 'canvas' ); //獲得畫布
var ctx = canvas.getContext( '2d' );//注意：2d小寫， 3d：webgl
1)上下文，所有繪制操作api的入口。
2)canvas本身無法繪制任何內(nèi)容，canvas的繪圖是使用Javascript操作的。
3.基本的繪制路徑
3.1 設(shè)置繪制起點（moveTo）
語法：ctx.moveTo(x,y)
注意：1、設(shè)置上下文繪制路徑的起點。
2、 x，y都是相對于canvas 盒子的左上角。
3、 繪制線段必須先設(shè)置起點。
3.2 設(shè)置直線（lineTo）
語法：ctx.lineTo(x,y)
注意：1、從x,y的位置繪制一條直線到起點或者上一個線頭點。
3.3 路徑開始和閉合
開始路徑 ctx.beginPath();
閉合路徑 ctx.closePath();
注意：1、繪制不同狀態(tài)的線段或者形狀，必須使用開始新路徑的方法把不同的繪制操作隔開。
2、閉合路徑會自動把最后的線頭和開始的線頭連在一起。
3.4 描邊（stroke）
語法：ctx.strokeStyle = "rgb(255,0,0)";
ctx.stroke();
注意：1、根據(jù)路徑繪制線。路徑只是草稿，真正繪制線必須執(zhí)行stroke。
3.5 填充（fill）
語法：ctx.fillStyle="green";
ctx.fill();
注意：1、將閉合路徑的內(nèi)容填充具體的顏色。
3.6 繪制矩形
語法：創(chuàng)建矩形：ctx.rect(x,y,width,height)
描邊矩形：ctx.strokeRect(x,y,width,height)
填充矩形：ctx.fillRect(x,y,width,height)
清除矩形：ctx.clearRect(x,y,width,height)
注意：1、x,y為矩形左上角坐標(biāo)。
2、該方法只是規(guī)劃了路徑，并沒有填充和描邊。
3、需加ctx.fill()以填充 || ctx.stroke()描邊
3.7 繪制圓形（arc）
語法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
注意：1、x,y圓心坐標(biāo)。
2、r半徑
3、sAngle繪制開始的弧度，圓心到最右邊點是0度，順時針方向弧度增大。
4、eAngle結(jié)束的弧度，單位π
5、counterclockwise是否逆時針，true逆時針
6、弧度角度轉(zhuǎn)換：rad = deg*Math.PI/180;
true為逆時針，false為順時針
4.canvas顏色樣式和陰影
4.1 顏色
ctx.fillStyle : 設(shè)置或返回用于填充繪畫的顏色
ctx.strokeStyle: 設(shè)置或返回用于筆觸的顏色
4.2 陰影
ctx.fillStyle = "pink"
ctx.shadowColor = "陰影顏色";
ctx.shadowBlur = 正數(shù)（模糊級別）;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillRect(100, 100, 100, 100);
5.canvas文本and漸變and圖像
5.1 文本
語法：1、font - 定義字體
2、fillText(text,x,y) - 繪制實心文本
3、strokeText(text,x,y) - 繪制空心文本
案例：
ctx.strokeStyle = "blue";
ctx.font = "30px Arial";
ctx.fillText("hello world",10,50);
（高30px、Arial字體的藍(lán)色實心文字）
5.2 漸變
語法：1、createLinearGradient(x,y,x1,y1) - 線條漸變
2、createRadialGradient(x,y,r,x1,y1,r1) - 徑向漸變
案例：
(創(chuàng)建漸變、填充漸變)
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;
ctx.fillRect = "10,10,100,100"
5.3 圖像
ctx.drawImage(image，10，10)
