關於canvas的方法和屬性
阿新 • • 發佈：2018-11-08
獲取 Canvas 物件
獲取到 Canvas 的上下文環境的語法為：
canvas.getContext(contextType, contextAttributes);
上下文型別（contextType）：
2d（本小冊所有的示例都是 2d 的）：代表一個二維渲染上下文
webgl（或"experimental-webgl"）：代表一個三維渲染上下文
webgl2（或"experimental-webgl2"）：代表一個三維渲染上下文；這種情況下只能在瀏覽器中實現 WebGL 版本2 (OpenGL ES 3.0)。
var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d");
繪製路徑
| 方法 | 屬性 | 描述 |
|---|---|---|
| fill() | 填充路徑 | |
| stroke() | 描邊 | |
| arc(x,y,r,sAngle,eAngle,counterclockwise) | x：圓的中心的 x 座標 y：圓的中心的 y 座標 r：圓的半徑 sAngle：起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度） eAngle：結束角，以弧度計。 counterclockwise：可選。規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。 | 建立圓弧 |
| rect(x,y,width,height) | 建立矩形 | |
| fillRect(x,y,width,height) | 繪製矩形路徑區域 | |
| strokeRect(x,y,width,height) | 繪製矩形路徑描邊 | |
| clearRect(x,y,width,height) | 在給定的矩形內清除指定的畫素 | |
| arcTo(x1,y1,x2,y2,r) | x1：弧的起點的 x 座標 y1：弧的起點的 y 座標 x2：弧的終點的 x 座標 y2：弧的終點的 y 座標 r：弧的半徑 | 建立兩切線之間的弧/曲線 |
| beginPath() | 起始一條路徑，或重置當前路徑 | |
| moveTo(x, y) | 把路徑移動到畫布中的指定點，不建立線條 | |
| lineTo(x, y) | 新增一個新點，然後在畫布中建立從該點到最後指定點的線條 | |
| closePath() | 建立從當前點回到起始點的路徑 | |
| clip() | 從原始畫布剪下任意形狀和尺寸的區域 | |
| quadraticCurveTo(cpx,cpy,x,y) | cpx：貝塞爾控制點的 x 座標 cpy：貝塞爾控制點的 y 座標 x：結束點的 x 座標 y：結束點的 y 座標 |
建立二次方貝塞爾曲線 |
| bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) | cp1x：第一個貝塞爾控制點的 x 座標 cp1y：第一個貝塞爾控制點的 y 座標 cp2x：第二個貝塞爾控制點的 x 座標 cp2y：第二個貝塞爾控制點的 y 座標 x：結束點的 x 座標 y：結束點的 y 座標 |
建立三次方貝塞爾曲線 |
| isPointInPath(x, y) | 如果指定的點位於當前路徑中，則返回 true，否則返回 false |
繪製直線的樣式
| 樣式 | 值 | 描述 |
|---|---|---|
| lineCap | butt：預設。向線條的每個末端新增平直的邊緣 round：向線條的每個末端新增圓形線帽 square：向線條的每個末端新增正方形線帽 |
設定或返回線條的結束端點樣式 |
| lineJoin | bevel：建立斜角round：建立圓角 miter：預設。建立尖角。 |
設定或返回兩條線相交時，所建立的拐角型別 |
| lineWidth | number：當前線條的寬度，以畫素計 | 設定或返回當前的線條寬度 |
| miterLimit | number：正數。規定最大斜接長度。如果斜接長度超過 miterLimit 的值，邊角會以 lineJoin 的 "bevel" 型別來顯示。 只有當 lineJoin 屬性為 "miter" 時，miterLimit 才有效。 |
設定或返回最大斜接長度 |
顏色、樣式和陰影
| 屬性 | 描述 |
|---|---|
| fillStyle | 設定或返回用於填充繪畫的顏色、漸變或模式 |
| strokeStyle | 設定或返回用於筆觸的顏色、漸變或模式 |
| shadowColor | 設定或返回用於陰影的顏色 |
| shadowBlur | 設定或返回用於陰影的模糊級別 |
| shadowOffsetX | 設定或返回陰影距形狀的水平距離 |
| shadowOffsetY | 設定或返回陰影距形狀的垂直距離 |
設定漸變
| 方法 | 屬性 | 描述 |
|---|---|---|
| createLinearGradient(x0,y0,x1,y1) | x0：漸變開始點的 x 座標 y0：漸變開始點的 y 座標 x1：漸變結束點的 x 座標 y1：漸變結束點的 y 座標 |
建立線性漸變（用在畫布內容上） |
| createPattern(image,"repeat|repeat-x|repeat-y|no-repeat") | image：規定要使用的圖片、畫布或視訊元素。 | 在指定的方向上重複指定的元素 |
| createRadialGradient(x0,y0,r0,x1,y1,r1) | x0：漸變的開始圓的 x 座標 y0：漸變的開始圓的 y 座標 r0：開始圓的半徑 x1：漸變的結束圓的 x 座標 y1：漸變的結束圓的 y 座標 r1：結束圓的半徑 |
建立放射狀/環形的漸變（用在畫布內容上） |
| addColorStop(stop,color) | stop：介於 0.0 與 1.0 之間的值，表示漸變中開始與結束之間的位置 color：在結束位置顯示的 CSS 顏色值 |
規定漸變物件中的顏色和停止位置 |
圖形轉換
| 方法 | 屬性 | 描述 |
|---|---|---|
| scale(scalewidth,scaleheight) | scalewidth：縮放當前繪圖的寬度 (1=100%, 0.5=50%, 2=200%, 依次類推) scaleheight：縮放當前繪圖的高度 (1=100%, 0.5=50%, 2=200%, etc.) |
縮放當前繪圖至更大或更小 |
| rotate(angle) | angle：旋轉角度，以弧度計。如需將角度轉換為弧度，請使用 degrees*Math.PI/180 公式進行計算。 | 旋轉當前繪圖 |
| translate(x,y) | x：新增到水平座標（x）上的值 y：新增到垂直座標（y）上的值 |
重新對映畫布上的 (0,0) 位置 |
| transform(a,b,c,d,e,f) | a：水平縮放繪圖 b：水平傾斜繪圖 c：垂直傾斜繪圖 d：垂直縮放繪圖 e：水平移動繪圖 f：垂直移動繪圖 |
替換繪圖的當前轉換矩陣 |
| setTransform(a,b,c,d,e,f) | a：水平旋轉繪圖 b：水平傾斜繪圖 c：垂直傾斜繪圖 d：垂直縮放繪圖 e：水平移動繪圖 f：垂直移動繪圖 |
將當前轉換重置為單位矩陣，然後執行 transform() |
影象繪製
| 方法 | 屬性 | 描述 |
|---|---|---|
| drawImage(img,sx,sy,swidth,sheight,x,y,width,height) | img：規定要使用的影象、畫布或視訊 sx：可選。開始剪下的 x 座標位置 sy：可選。開始剪下的 y 座標位置 swidth：可選。被剪下影象的寬度 sheight：可選。被剪下影象的高度 x：在畫布上放置影象的 x 座標位置 y：在畫布上放置影象的 y 座標位置 width：可選。要使用的影象的寬度（伸展或縮小影象） height：可選。要使用的影象的高度（伸展或縮小影象） |
向畫布上繪製圖像、畫布或視訊 |