HTML 5 Canvas 繪製圖形影象
阿新 • • 發佈：2018-11-13
HTML5 Canvas
HTML5 <canvas> 標籤定義圖形，比如圖表和其他影象，必須使用指令碼來繪製圖形。<canvas> 是 HTML 5 中的新標籤。
<canvas> 元素本身並沒有繪製能力，它僅僅是圖形的容器/畫布，必須使用指令碼(JavaScript)來完成實際的繪圖任務。
getContext() 方法可返回一個物件，該物件提供了用於在畫布上繪圖的方法和屬性。 getContext("2d") 物件屬性和方法，可用於在畫布上繪製文字、線條、矩形、圓形等二維影象。
表格中的數字表示支援 <canvas> 元素的第一個瀏覽器版本號：
| 元素 | Chrome | IE | Firefox | Safari | opera |
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
<cavas> 元素屬於行內元素。
建立一個畫布（Canvas）
一個畫布容器 <canvas> 在網頁中是一個矩形框， 預設情況下 <canvas> 元素沒有邊框和內容。<canvas>簡單例項如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>Cavas 演示</title> </head> <body> <canvas id="myCanvas1" width="200" height="100" style="border:1px solid #000000;"> 瀏覽器不支援 HTML5 canvas </canvas> <canvas id="myCanvas2" width="200" height="100" style="border:1px solid #f00;"> 瀏覽器不支援 HTML5 canvas </canvas> </body> </html>
<cavas> 標籤通常需要指定一個 id 屬性 (因為指令碼中經常引用), width 和 height 屬性定義的畫布的大小，可以在 HTML 頁面中使用多個 <canvas> 元素。
JavaScript 繪製圖像
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>Cavas 演示</title> <!-- JQuery CDN--> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> $(function () { /**獲取 cavas Dom 物件*/ var canvasObj = document.getElementById("myCanvas"); /**獲取 context 物件，該物件提供了用於在畫布上繪圖的方法和屬性 * 2d 是目前支援的二維影象*/ var ctx = canvasObj.getContext("2d"); /**繪製一個紅色的矩形*/ ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 75); }); </script> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> 瀏覽器不支援 HTML5 canvas </canvas> </body> </html>
設定 fillStyle 屬性可以是 CSS 顏色，漸變，或圖案，fillStyle 預設設定是#000000（黑色），後面會詳細講解。
fillRect(x,y,width,height) 方法繪製“被填充”的矩形，後面會詳細講解。
Canvas 座標
canvas 是一個二維網格，canvas 的左上角座標為 (0,0)，如上fillRect (0,0,150,75) 意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。
顏色、樣式和陰影
| 屬性 | 描述 |
|---|---|
| fillStyle | 設定或返回用於填充繪畫的顏色、漸變或模式 |
| strokeStyle | 設定或返回用於筆觸的顏色、漸變或模式 |
| shadowColor | 設定或返回用於陰影的顏色 |
| shadowBlur | 設定或返回用於陰影的模糊級別 |
| shadowOffsetX | 設定或返回陰影距形狀的水平距離 |
| shadowOffsetY | 設定或返回陰影距形狀的垂直距離 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 建立線性漸變（用在畫布內容上） |
| createPattern() | 在指定的方向上重複指定的元素 |
| createRadialGradient() | 建立放射狀/環形的漸變（用在畫布內容上） |
| addColorStop() | 規定漸變物件中的顏色和停止位置 |
線條樣式
| 屬性 | 描述 |
|---|---|
| lineCap | 設定或返回線條的結束端點樣式 |
| lineJoin | 設定或返回兩條線相交時，所建立的拐角型別 |
| lineWidth | 設定或返回當前的線條寬度 |
| miterLimit | 設定或返回最大斜接長度 |
矩形
| 方法 | 描述 |
|---|---|
| rect() | 建立矩形 |
| fillRect() | 繪製“被填充”的矩形 |
| strokeRect() | 繪製矩形（無填充） |
| clearRect() | 在給定的矩形內清除指定的畫素 |
路 徑
| 方法 | 描述 |
|---|---|
| fill() | 填充當前繪圖（路徑） |
| stroke() | 繪製已定義的路徑 |
| beginPath() | 起始一條路徑，或重置當前路徑 |
| moveTo() | 把路徑移動到畫布中的指定點，不建立線條 |
| closePath() | 建立從當前點回到起始點的路徑 |
| lineTo() | 新增一個新點，然後在畫布中建立從該點到最後指定點的線條 |
| clip() | 從原始畫布剪下任意形狀和尺寸的區域 |
| quadraticCurveTo() | 建立二次貝塞爾曲線 |
| bezierCurveTo() | 建立三次方貝塞爾曲線 |
| arc() | 建立弧/曲線（用於建立圓形或部分圓） |
| arcTo() | 建立兩切線之間的弧/曲線 |
| isPointInPath() | 如果指定的點位於當前路徑中，則返回 true，否則返回 false |
轉 換
| 方法 | 描述 |
|---|---|
| scale() | 縮放當前繪圖至更大或更小 |
| rotate() | 旋轉當前繪圖 |
| translate() | 重新對映畫布上的 (0,0) 位置 |
| transform() | 替換繪圖的當前轉換矩陣 |
| setTransform() | 將當前轉換重置為單位矩陣。然後執行 transform() |
文字
| 屬性 | 描述 |
|---|---|
| font | 設定或返回文字內容的當前字型屬性 |
| textAlign | 設定或返回文字內容的當前對齊方式 |
| textBaseline | 設定或返回在繪製文字時使用的當前文字基線 |
| 方法 | 描述 |
|---|---|
| fillText() | 在畫布上繪製“被填充的”文字 |
| strokeText() | 在畫布上繪製文字（無填充） |
| measureText() | 返回包含指定文字寬度的物件 |
影象繪製
| 方法 | 描述 |
|---|---|
| drawImage() | 向畫布上繪製圖像、畫布或視訊 |
畫素操作
| 屬性 | 描述 |
|---|---|
| width | 返回 ImageData 物件的寬度 |
| height | 返回 ImageData 物件的高度 |
| data | 返回一個物件，其包含指定的 ImageData 物件的影象資料 |
| 方法 | 描述 |
|---|---|
| createImageData() | 建立新的、空白的 ImageData 物件 |
| getImageData() | 返回 ImageData 物件，該物件為畫布上指定的矩形複製畫素資料 |
| putImageData() | 把影象資料（從指定的 ImageData 物件）放回畫布上 |
合成
| 屬性 | 描述 |
|---|---|
| globalAlpha | 設定或返回繪圖的當前 alpha 或透明值 |
| globalCompositeOperation | 設定或返回新影象如何繪製到已有的影象上 |
其 他
| 方法 | 描述 |
|---|---|
| save() | 儲存當前環境的狀態 |
| restore() | 返回之前儲存過的路徑狀態和屬性 |
| createEvent() | |
| getContext() | |
| toDataURL() |