Canvas經常使用API

概述

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() // 對線進行着色，這時整條線就變得可見
複製代碼

效果圖以下：

其中 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)
複製代碼