CanvasRanderingContext2D接口用來在canvas元素上繪制矩形戚哎，文本，圖片或其他對象蒲赂。它為在<canvas>元素表面上繪圖提供了2D渲染上下文
調(diào)用<canvas>元素的getContext()方法亚兄，加入"2d"作為參數(shù)可以獲得這個接口的實例顽冶。
canvas = document.getElementById('mycanvas'); // in your HTML this element appears as <canvas id="mycanvas"></canvas>
var ctx = canvas.getContext('2d');
Rect
- clearRect(x,y,w,h) 清除矩形
- fillRect(x,y,w,h) 繪制實心矩形
- strokeRect(x,y,w,h) 繪制空心矩形
Text
- fillText(text,x,y) 繪制文字
- strokeRect(text,x,y)繪制空心文字
- measureText(text) 獲取文字的
textMetrics屬性，可以用來獲取文字寬度等屬性
Path
- beginPath() 新建一個路徑
- closePath() 閉合一個路勁岩喷，從當前終點向起點繪制一條直線
- moveTo(x,y) 把指針移到指定坐標
- lineTo(x,y) 從當前位置到指定位置繪制一條直線
- bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 通過2個控制點和一個終點位置繪制貝塞爾曲線
- quadraticCurveTo(cpx, cpy, x, y) 二次貝塞爾曲線恕沫，需要控制點和終點
- arc(x, y, radius, startAngle, endAngle, anticlockwise) 在指定坐標(x,y)繪制一個半徑為r的從startAngle到endAngle的圓弧，繪制方向由anticlockwise決定(默認順時針)
- arcTo(x1, y1, x2, y2, radius) 通過給定控制點和半徑繪制圓弧纱意，用直線連接前2個點
- ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) 以為(x,y)我中心婶溯，以radiusX和radiusY為半徑，起始于startAngle偷霉，結(jié)束于endAngle迄委，方向由anticlockwise決定(默認順時針)繪制一個橢圓
- rect(x,y,w,h) 在(x,y)繪制一個大小為(w,h)的矩形
Drawing paths
- fill() 填充方式
- stroke() 畫筆方式
- drawFocusIfNeeded() 如果給定元素獲得焦點，在當前路徑上繪制焦點環(huán)繞
- clip() 所有在clip()繪制的圖形都會出現(xiàn)在clipping path里
- isPointInPath(x,y) 驗證指定點是否在當前路勁內(nèi)
- isPointInStroke(x,y) 驗證指定點是否在一個畫筆軌跡內(nèi)类少。
