Canvas常用API

FruitBro發表於2020-03-26
CanvasAPI

概述

Canvas API提供了一個通過JavaScript和HTML的<canvas>元素來繪製圖形的方式。它可以用於動畫、遊戲畫面、資料視覺化、圖片編輯以及實時視訊處理等方面。

Canvas API主要聚焦於2D圖形。而同樣使用<canvas>元素的WebGL API則用於繪製硬體加速的2D和3D圖形。

參考文件：Canvas API

基礎示例

在畫布上繪製一個綠色的長方形。

<canvas id="canvas">
Not Support Canvas!
</canvas>
複製程式碼

如果瀏覽器不支援canvas，則顯示---Not Support Canvas!

  1. 用document.getElementById('canvas')獲取HTML<canvas>元素的引用。
  2. 用HTMLCanvasElement.getContext()方法獲取這個元素的context---影像稍後將在此被渲染。通過getContext獲取context物件（上下文物件），Canvas 的 API就定義在這個context物件上面。
  3. 由CanvasRenderingContext2D介面完成實際的繪製。fillStyle屬性讓長方形變成綠色。fillReact()方法將它的左上角放在(10 , 10),把它的大小設定成寬150和高100.fillReact()方法用來繪製矩形。
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = 'green'
ctx.fillRect(10, 10, 150, 100)
複製程式碼

上述程式碼中，getContext方法指定引數2d,表示該canvas節點用於生成2D平面圖案。引數是webgl,就表示用於生成3D影像（即立體圖案），這部分叫做WebGL API。

1. 繪製路徑

beginPath方法表示開始繪製路徑，moveTo(x, y)方法設定線段的起點，lineTo(x, y)方法設定線段的終點，stroke方法用來給透明的線段著色。

ctx.beginPath() // 開始路徑繪製
ctx.moveTo(20, 30) // 設定路徑起點，座標為（20，30）
ctx.lineTo(200, 10) // 設定路徑終點座標為（200，20）
ctx.lineWidth = 10.0 // 設定線寬
ctx.strokeStyle = '#CC0000'; // 設定線的顏色
ctx.stroke() // 對線進行著色，這時整條線就變得可見
複製程式碼

效果圖如下：

Canvas常用API
其中moveTo和lineTo方法可以多次使用。

2. 影像處理方法

2.1 drawImage()函式可以將圖片繪製到畫布上。做法是讀取圖片後，使用drawImage方法在畫布內進行重繪。

由於影像的載入需要時間，因此drawImage方法需要在影像完全載入後再呼叫：

let img = new Image()
img.onload = function () {
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  ctx.width = image.width
  ctx.height = image.height
  ctx.drawImage(img, 0, 0) // (0 ,0 )代表圖片在畫布上的位置
}
img.src = 'image.png'

複製程式碼

上面程式碼將一個PNG影像載入畫布。drawImage()方法接受三個引數，第一個引數是影像檔案的DOM元素（即<img>節點），第二個和第三個引數是影像左上角在畫布中的座標，上例中的(0, 0)就表示將影像左上角放置在畫布的左上角。

2.2 用toDataURL()或toBlob()將canvas資料轉化為圖片檔案形式，並控制匯出圖片的質量

let img = new Image()
// toDataURL
img.src = ctx.toDataURL('image/png', 0.92)
// toBlob
img.src = ctx.toBlob('','image/png', 0.92)
複製程式碼

區別：

  1. toDataURL是把圖片轉換成base64格式資訊，純字元的圖片標識方法。第一個image/png參數列示匯出的base64圖片型別預設是png，即'image/png'，也可以為 'image/jpeg'或webp等格式。第二個引數0.92表示匯出圖片的質量，只有匯出圖片為jpg和webp時才有效果，預設是0.92。
  2. toBlob:是把canvas轉換成Blob檔案（二進位制檔案），通常用於檔案上傳。

2.3 用getImageData方法讀取Canvas的內容，使用putImageData方法將陣列內容重新繪製在Canvas上。

getImageData方法可以用來讀取Canvas的內容，返回一個物件，包含了每個畫素的資訊。

let imageData = context.getImageDate(0, 0, canvas.width, canvas.height)
複製程式碼

imageData物件有一個data屬性，它的值是一個一維陣列。改陣列的值，依次是每個畫素的紅、綠、藍、alpha通道值，因此該陣列的長度等於影像的畫素寬度x影像的畫素高度x4，每個值的範圍是0-255。這個陣列不僅可讀，而且可寫，因此通過操作這個陣列的值，就可以達到操作影像的目的。修改這個陣列以後，使用putImageData方法將陣列內容重新繪製在Canvas上。

context.putImageData(imageData, 0, 0)
複製程式碼

相關文章