一篇文章《HTML5(五)——Canvas API》介紹 canvas 繪制基本圖形，這節(jié)開(kāi)始介紹canvas的高級(jí)操作。

一、canvas 轉(zhuǎn)換

canvas 轉(zhuǎn)換常用的幾種方法介紹，如下：

1.1 、scale - 縮放

使用語(yǔ)法：scale(x,y)

x：表示水平方向的縮放倍數(shù)

y：表示垂直方向的縮放倍數(shù)

eg：canvas 繪制的矩形框放大兩倍，代碼如下：

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.scale(2,2)
ctx.fillStyle="red"
ctx.fillRect(0,0,200,200)

1.2、translate - 畫(huà)布平移

使用語(yǔ)法：translate(x,y)

x：添加到水平坐標(biāo)上的位置

y：添加到垂直坐標(biāo)上的位置

設(shè)置之后開(kāi)始繪制的圖片位置從(x,y)算起。

eg：繪制兩個(gè)一樣的矩形，一個(gè)在平移前繪制，一個(gè)在平移后繪制，代碼如下：

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
ctx.fillStyle="red"
        
ctx.fillRect(0,0,200,200)
//平移
ctx.translate(200,200)
ctx.fillRect(0,0,200,200)

運(yùn)行結(jié)果如圖：

1.3 、rotate - 旋轉(zhuǎn)

使用語(yǔ)法：rotate(angle)

angle 旋轉(zhuǎn)弧度，如果想使用角度，可以把角度轉(zhuǎn)成弧度，公式為：deg * Path.PI/180。

eg：將一個(gè)矩形旋轉(zhuǎn)45度，代碼如下：

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
//旋轉(zhuǎn)45度
ctx.rotate(45*Math.PI/180)
ctx.fillStyle="red"
ctx.fillRect(0,0,200,200)

運(yùn)行結(jié)果如圖：

根據(jù)上述結(jié)果我們發(fā)現(xiàn)旋轉(zhuǎn)的時(shí)候，默認(rèn)原點(diǎn)是畫(huà)布的起始點(diǎn)，我們想要的旋轉(zhuǎn)是在矩形框中心為原點(diǎn)的旋轉(zhuǎn)，此時(shí)我們需要借助上translate平移，重置一下原點(diǎn)，修改上述代碼為：

<canvas width="400" height="400" id="canvas"></canvas>

var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

ctx.translate(200,200)
ctx.rotate(45*Math.PI/180)
ctx.translate(-200,-200)

ctx.fillStyle="red"
ctx.fillRect(100,100,200,200)

運(yùn)行結(jié)果如圖：

1.4、transform - 矩陣變換

使用語(yǔ)法：transform(a,b,c,d,e,f)

• a:水平縮放
• b:水平傾斜
• c:垂直傾斜
• d:垂直縮放
• e:水平移動(dòng)
• f:垂直移動(dòng)

transform可以替代前邊平移、縮放、旋轉(zhuǎn)三者，如下：

// 平移
translate(x,y) <=> transform(1,0,0,1,x,y) <=> transform(0,1,1,0,x,y)

// 縮放
sacle(x,y) <=> transform(x,0,0,y,0,0) 

// 旋轉(zhuǎn)
rotate(angle) <=> transform(Math.cos(angle*Math.PI/180), Math.sin(angel*Math.PI/180), -Math.sin(angle*Math.PI/180), Math.cos(angle*Math.PI/180))

1.5、setTransform - 矩陣變換

setTransform()方法將變換的矩陣進(jìn)行重置，它把當(dāng)前的變換矩陣重置為單位矩陣
使用語(yǔ)法：transform(a,b,c,d,e,f)
各參數(shù)說(shuō)明：水平旋轉(zhuǎn)、水平傾斜、垂直傾斜、垂直縮放、水平移動(dòng)、垂直移動(dòng)

setTransform() 方法把當(dāng)前的變換矩陣重置為單位矩陣，然后以相同的參數(shù)運(yùn)行 transform()。

二、canvas 操作圖片

drawImage() 在畫(huà)布上繪制圖像、畫(huà)布或視頻。也能夠繪制圖片的一部分，增加或減少圖像的尺寸。以下是三種常見(jiàn)使用語(yǔ)法：

• 語(yǔ)法1：drawImage( img , x , y )
• 語(yǔ)法2：drawImage( img , x , y , width , height )
• 語(yǔ)法3：drawImage( img , sx , sy , swidth, sheight , x , y , width , height )

上述參數(shù)表示的意義如下：

eg：利用語(yǔ)法3，進(jìn)行繪制圖片的部分內(nèi)容，實(shí)現(xiàn)如下效果：

給上述兔子順便加一個(gè)點(diǎn)擊屏幕暫停開(kāi)始功能，完整代碼如下：

<canvas width="400" height="400" id="canvas"></canvas>
<script>
 var canvas = document.getElementById("canvas")
 var ctx = canvas.getContext("2d")
 var img = new Image()
 let pause = false,frameCounter = 0,i=0;
 img.src = "./rotate.png"
 img.onload = function(){
  requestAnimationFrame(next)
 }
function next(){
 ctx.clearRect(0,0,canvas.width,canvas.height)
 if(frameCounter%5 == 0){ //frameCounter 控制動(dòng)畫(huà)速度
  i++
  if(i==11)i=0
 }
 ctx.drawImage(img,
  0,i*240,240,240,
  0,0,240,240) // 每張圖片寬高都是240，具體參數(shù)根據(jù)圖片而定
  frameCounter ++
  if(!pause)requestAnimationFrame(next)
 }
window.onclick = function(){
 pause = !pause
 next()
}
</script>

eg：使用 canvas 畫(huà)布處理視頻，使用定時(shí)器繪制視頻的當(dāng)前幀，連續(xù)起來(lái)就是一個(gè)視頻，需要注意的是必須處理暫停和開(kāi)始播放兩種操作，具體代碼如下：

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function() 
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

三、像素級(jí)操作

常見(jiàn)的像素級(jí)的操作有三種：

• getImageData() - 獲取畫(huà)布像素?cái)?shù)據(jù)
• createImageData() - 創(chuàng)建新的、空白像素
• putImageData() - 圖像像素?cái)?shù)據(jù)放回畫(huà)布

3.1、getImageData

使用語(yǔ)法：getImageData( x , y , width , height )

• x：要被提取的圖像數(shù)據(jù)矩形區(qū)域的左上角 x 坐標(biāo)。
• y：要被提取的圖像數(shù)據(jù)矩形區(qū)域的左上角 y 坐標(biāo)。
• width：被提取的圖像數(shù)據(jù)矩形區(qū)域的寬度
• height：被提取的圖像數(shù)據(jù)矩形區(qū)域的高度

返回一個(gè) imageData 對(duì)象，用來(lái)描述 canvas 區(qū)域隱含的像素?cái)?shù)據(jù)，這個(gè)區(qū)域通過(guò)像素表示，起點(diǎn)是( x , y )，寬高為 widht 和 height 。

imageData 對(duì)象包含三個(gè)屬性：

• imageData.height - 像素描述的矩形實(shí)際高度。
• imageData.width - 像素描述的矩形實(shí)際寬度。
• imageData.data - 包含 rgba 順序數(shù)據(jù)的一個(gè)數(shù)組，數(shù)據(jù)使用0-255直接整數(shù)表示。

3.2、createImageData

使用語(yǔ)法：

createImageData( width , height )

創(chuàng)建一個(gè)空白的 imageData 對(duì)象，新對(duì)象的默認(rèn)像素值 transparent black。對(duì)于imageData對(duì)象中的每個(gè)像素值，都存在 rgba 這四方面的信息，即：

• r - 紅色（0-255）
• g - 綠色（0-255）
• b - 藍(lán)色（0-255）
• a - alpha（0-255,0是透明，255是完全可見(jiàn)）

新對(duì)象默認(rèn)像素值為（0,0,0,0）。

eg：如果我們想把 imageData 中一個(gè)像素變?yōu)榧t色時(shí)，可以改變第一和第四位信息，代碼如下：

var imageData = ctx.createImageData(100,100)
imageData.data[0] = 255
imageData.data[1] = 0
imageData.data[2] = 0
imageData.data[3] = 255

3.1、putImageData

使用語(yǔ)法：

putImageData( imgData , x , y , dirtyX , dirtyY , dirtyWidth ,dirtyHeight );

參數(shù)及意義：

通過(guò) getImageData 復(fù)制的指定矩形像素?cái)?shù)據(jù)，編輯之后，通過(guò) putImageData 方法將圖像數(shù)據(jù)放回畫(huà)布上。

eg：添加濾鏡效果：上述兔子是白色的變換成紅色兔子，這時(shí)需要把綠色和藍(lán)色都設(shè)置成0即可，代碼如下：

在現(xiàn)代網(wǎng)站產(chǎn)品開(kāi)發(fā)中，要想提升用戶體驗(yàn)，集成一個(gè)強(qiáng)大的圖像編輯工具至關(guān)重要。今天給大家推薦一款基于HTML5 Canvas的全功能圖像編輯工具——TUI Image Editor。它不僅提供了豐富的功能，還提供了簡(jiǎn)單的集成方式。

圖像編輯

裁剪：可以做到精確剪裁圖片，保留重要部分。旋轉(zhuǎn)：調(diào)整圖像方向。繪圖：在照片上添加形狀和圖案，還可以添加文本。圖像濾鏡：提供多種濾鏡效果，如灰度、反轉(zhuǎn)、復(fù)古等。

集成功能

它還提供了下載功能，當(dāng)用戶編輯完成后，可以直接下載處理后的圖像。同時(shí)也支持從本地或者遠(yuǎn)程加載圖像進(jìn)行編輯。提供了撤銷和重做功能，方便用戶操作，允許用戶充值編輯或者刪除特定對(duì)象。

自定義主題

TUI Image Editor支持多種自定義主題，可以根據(jù)不同的需求調(diào)整顯示尺寸和界面風(fēng)格，確保與嵌入的網(wǎng)站整體設(shè)計(jì)一致。

總結(jié)

TUI Image Editor是一個(gè)強(qiáng)大且易于使用的圖像編輯工具，適合各種網(wǎng)頁(yè)應(yīng)用的集成需求。集成簡(jiǎn)單，提供JavaScript、Vue、React等主流的前端框架集成方案。主持主流瀏覽器，谷歌瀏覽器、IE瀏覽器、蘋果瀏覽器和火狐瀏覽器。它提供了豐富的編輯功能和靈活的自定義選項(xiàng)，使得開(kāi)發(fā)者可以輕松為用戶提供高級(jí)的圖像編輯體驗(yàn)。如果你正在尋找一個(gè)高效的圖像編輯解決方案，TUI Image Editoe無(wú)疑是一個(gè)值得考慮的選擇。截止目前github已有超過(guò)6.9K的Star。如果覺(jué)得不錯(cuò)幫忙點(diǎn)贊關(guān)注下。#github項(xiàng)目推薦#