JS Canvas接口和動畫效果大全

概述

<canvas>元素用於生成圖像。它本身就像一個畫佈,JavaScript通過操作它的 API,在上面生成圖像。它的底層是一個個像素,基本上<canvas>是一個可以用JavaScript操作的位圖(bitmap)。

它與 SVG 圖像的區別在於,<canvas>是腳本調用各種方法生成圖像,SVG 則是一個 XML 文件,通過各種子元素生成圖像。

使用 Canvas API 之前,需要在網頁裡面新建一個<canvas>元素。

<canvas id="myCanvas" width="400" height="250">
  你的瀏覽器不支持canvas!
</canvas>

如果瀏覽器不支持這個 API,就會顯示<canvas>標簽中間的文字:“您的瀏覽器不支持 Canvas”。

每個<canvas>元素都有一個對應的CanvasRenderingContext2D對象(上下文對象)。Canvas API 就定義在這個對象上面。

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

上面代碼中,<canvas>元素節點對象的getContext()方法,返回的就是CanvasRenderingContext2D對象。

註意,Canvas API 需要getContext方法指定參數2d,表示該<canvas>節點生成 2D 的平面圖像。如果參數是webgl,就表示用於生成 3D 的立體圖案,這部分屬於 WebGL API。

按照用途,Canvas API 分成兩大部分:繪制圖形和圖像處理。

Canvas API:繪制圖形

Canvas 畫佈提供瞭一個作圖的平面空間,該空間的每個點都有自己的坐標。原點(0, 0)位於圖像左上角,x軸的正向是原點向右,y軸的正向是原點向下。

路徑

以下方法和屬性用來繪制路徑。

  • CanvasRenderingContext2D.beginPath():開始繪制路徑。
  • CanvasRenderingContext2D.closePath():結束路徑,返回到當前路徑的起始點,會從當前點到起始點繪制一條直線。如果圖形已經封閉,或者隻有一個點,那麼此方法不會產生任何效果。
  • CanvasRenderingContext2D.moveTo():設置路徑的起點,即將一個新路徑的起始點移動到(x,y)坐標。
  • CanvasRenderingContext2D.lineTo():使用直線從當前點連接到(x, y)坐標。
  • CanvasRenderingContext2D.fill():在路徑內部填充顏色(默認為黑色)。
  • CanvasRenderingContext2D.stroke():路徑線條著色(默認為黑色)。
  • CanvasRenderingContext2D.fillStyle:指定路徑填充的顏色和樣式(默認為黑色)。
  • CanvasRenderingContext2D.strokeStyle:指定路徑線條的顏色和樣式(默認為黑色)。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);

上面代碼隻是確定瞭路徑的形狀,畫佈上還看不出來,因為沒有顏色。所以還需要著色。

ctx.fill();
// 或者
ctx.stroke();

上面代碼中,這兩個方法都可以使得路徑可見。fill()在路徑內部填充顏色,使之變成一個實心的圖形;stroke()隻對路徑線條著色。

這兩個方法默認都是使用黑色,可以使用fillStyle和strokeStyle屬性指定其他顏色。

ctx.fillStyle = "red";
ctx.fill();
// 或者
ctx.strokeStyle = "red";
ctx.stroke();

上面代碼將填充和線條的顏色指定為紅色。

線型

以下的方法和屬性控制線條的視覺特征。

  • CanvasRenderingContext2D.lineWidth:指定線條的寬度,默認為 1.0。
  • CanvasRenderingContext2D.lineCap:指定線條末端的樣式,有三個可能的值:butt(默認值,末端為矩形)、round(末端為圓形)、square(末端為突出的矩形,矩形寬度不變,高度為線條寬度的一半)。
  • CanvasRenderingContext2D.lineJoin:指定線段交點的樣式,有三個可能的值:round(交點為扇形)、bevel(交點為三角形底邊)、miter(默認值,交點為菱形)。
  • CanvasRenderingContext2D.miterLimit:指定交點菱形的長度,默認為 10。該屬性隻在lineJoin屬性的值等於miter時有效。
  • CanvasRenderingContext2D.getLineDash():返回一個數組,表示虛線裡面線段和間距的長度。
  • CanvasRenderingContext2D.setLineDash():數組,用於指定虛線裡面線段和間距的長度。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);

ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.setLineDash([15, 5]);
ctx.stroke();

上面代碼中,線條的寬度為 3,線條的末端和交點都改成圓角,並且設置為虛線。

矩形

以下方法用來繪制矩形。

  • CanvasRenderingContext2D.rect():繪制矩形路徑。
  • CanvasRenderingContext2D.fillRect():填充一個矩形。
  • CanvasRenderingContext2D.strokeRect():繪制矩形邊框。
  • CanvasRenderingContext2D.clearRect():指定矩形區域的像素都變成透明。

上面四個方法的格式都一樣,都接受四個參數,分別是矩形左上角的橫坐標和縱坐標、矩形的寬和高。

CanvasRenderingContext2D.rect()方法用於繪制矩形路徑。

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

ctx.rect(10, 10, 100, 100);
ctx.fill();

上面代碼繪制一個正方形,左上角坐標為(10, 10),寬和高都為 100。

CanvasRenderingContext2D.fillRect()用來向一個矩形區域填充顏色。

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

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

上面代碼繪制一個綠色的正方形,左上角坐標為(10, 10),寬和高都為 100。

CanvasRenderingContext2D.strokeRect()用來繪制一個矩形區域的邊框。

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

ctx.strokeStyle = "green";
ctx.strokeRect(10, 10, 100, 100);

上面代碼繪制一個綠色的空心正方形,左上角坐標為(10, 10),寬和高都為 100。

CanvasRenderingContext2D.clearRect()用於擦除指定矩形區域的像素顏色,等同於把早先的繪制效果都去除。

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

ctx.fillRect(10, 10, 100, 100);
ctx.clearRect(15, 15, 90, 90);

上面代碼先繪制一個 100 x 100 的正方形,然後在它的內部擦除 90 x 90 的區域,等同於形成瞭一個 5 像素寬度的邊框。

弧線

以下方法用於繪制弧形。

  • CanvasRenderingContext2D.arc():通過指定圓心和半徑繪制弧形。
  • CanvasRenderingContext2D.arcTo():通過指定兩根切線和半徑繪制弧形。

CanvasRenderingContext2D.arc()主要用來繪制圓形或扇形。

// 格式
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

// 實例
ctx.arc(5, 5, 5, 0, 2 * Math.PI, true);

arc()方法的x和y參數是圓心坐標,radius是半徑,startAngle和endAngle則是扇形的起始角度和終止角度(以弧度表示),anticlockwise表示做圖時應該逆時針畫(true)還是順時針畫(false),這個參數用來控制扇形的方向(比如上半圓還是下半圓)。

下面是繪制實心圓形的例子。

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

ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI * 2, true);
ctx.fill();

上面代碼繪制瞭一個半徑 50,起始角度為 0,終止角度為 2 * PI 的完整的圓。

繪制空心半圓的例子。

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

ctx.beginPath();
ctx.moveTo(50, 20);
ctx.arc(100, 20, 50, 0, Math.PI, false);
ctx.stroke();

CanvasRenderingContext2D.arcTo()方法主要用來繪制圓弧,需要給出兩個點的坐標,當前點與第一個點形成一條直線,第一個點與第二個點形成另一條直線,然後畫出與這兩根直線相切的弧線。

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

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arcTo(50, 50, 100, 0, 25);
ctx.lineTo(100, 0);
ctx.stroke();

上面代碼中,arcTo()有 5 個參數,前兩個參數是第一個點的坐標,第三個參數和第四個參數是第二個點的坐標,第五個參數是半徑。然後,(0, 0)與(50, 50)形成一條直線,然後(50, 50)與(100, 0)形成第二條直線。弧線就是與這兩根直線相切的部分。

文本

以下方法和屬性用於繪制文本。

  • CanvasRenderingContext2D.fillText():在指定位置繪制實心字符。
  • CanvasRenderingContext2D.strokeText():在指定位置繪制空心字符。
  • CanvasRenderingContext2D.measureText():返回一個 TextMetrics 對象。
  • CanvasRenderingContext2D.font:指定字型大小和字體,默認值為10px sans-serif。CanvasRenderingContext2D.textAlign:文本的對齊方式,默認值為start。
  • CanvasRenderingContext2D.direction:文本的方向,默認值為inherit。
  • CanvasRenderingContext2D.textBaseline:文本的垂直位置,默認值為alphabetic。

fillText()方法用來在指定位置繪制實心字符。

CanvasRenderingContext2D.fillText(text, x, y [, maxWidth])

該方法接受四個參數。

  • text:所要填充的字符串。
  • x:文字起點的橫坐標,單位像素。
  • y:文字起點的縱坐標,單位像素。
  • maxWidth:文本的最大像素寬度。該參數可選,如果省略,則表示寬度沒有限制。如果文本實際長度超過這個參數指定的值,那麼瀏覽器將嘗試用較小的字體填充。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.fillText("Hello world", 50, 50);

上面代碼在(50, 50)位置寫入字符串Hello world。

註意,fillText()方法不支持文本斷行,所有文本一定出現在一行內。如果要生成多行文本,隻有調用多次fillText()方法。

strokeText()方法用來添加空心字符,它的參數與fillText()一致。

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

ctx.strokeText("Hello world", 50, 50);

上面這兩種方法繪制的文本,默認都是10px大小、sans-serif字體,font屬性可以改變字體設置。該屬性的值是一個字符串,使用css的font屬性即可。

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

ctx.font = "Bold 20px Arial";
ctx.fillText("Hello world", 50, 50);

textAlign屬性用來指定文本的對齊方式。它可以取以下幾個值。

  • left:左對齊
  • right:右對齊
  • center:居中
  • start:默認值,起點對齊(從左到右的文本為左對齊,從右到左的文本為右對齊)。
  • end:結尾對齊(從左到右的文本為右對齊,從右到左的文本為左對齊)。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.font = "Bold 20px Arial";
ctx.textAlign = "center";
ctx.fillText("Hello world", 50, 50);

direction屬性指定文本的方向,默認值為inherit,表示繼承<canvas>或document的設置。其他值包括ltr(從左到右)和rtl(從右到左)。

textBaseline屬性指定文本的垂直位置,可以取以下值。

  • top:上部對齊(字母的基線是整體上移)。
  • hanging:懸掛對齊(字母的上沿在一根直線上),適用於印度文和藏文。
  • middle:中部對齊(字母的中線在一根直線上)。
  • alphabetic:默認值,表示字母位於字母表的正常位置(四線格的第三根線)。
  • ideographic:下沿對齊(字母的下沿在一根直線上),使用於東亞文字。
  • bottom:底部對齊(字母的基線下移)。對於英文字母,這個設置與ideographic沒有差異。

measureText()方法接受一個字符串作為參數,返回一個 TextMetrics 對象,可以從這個對象上面獲取參數字符串的信息,目前主要是文本渲染後的寬度(width)。

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

var text1 = ctx.measureText("Hello world");
text.width; // 49.46

ctx.font = "Bold 20px Arial";
text2.width; // 107.78

上面代碼中,10px大小的字符串Hello world,渲染後寬度為49.46。放大到20px以後,寬度為107.78。

漸變色和圖像填充

以下方法用於設置漸變效果和圖像填充效果。

  • CanvasRenderingContext2D.createLinearGradient():定義線性漸變樣式。
  • CanvasRenderingContext2D.createRadialGradient():定義輻射漸變樣式。
  • CanvasRenderingContext2D.createPattern():定義圖像填充樣式。

createLinearGradient()方法按照給定直線,生成線性漸變的樣式。

ctx.createLinearGradient(x0, y0, x1, y1);

ctx.createLinearGradient(x0, y0, x1, y1)方法接受四個參數:x0和y0是起點的橫坐標和縱坐標,x1和y1是終點的橫坐標和縱坐標。通過不同的坐標值,可以生成從上至下、從左到右的漸變等等。

該方法的返回值是一個CanvasGradient對象,該對象隻有一個addColorStop()方向,用來指定漸變點的顏色。addColorStop()方法接受兩個參數,第一個參數是 0 到 1 之間的一個位置量,0 表示起點,1 表示終點,第二個參數是一個字符串,表示css顏色。

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

var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(1, "white");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

上面代碼中,定義瞭漸變樣式gradient以後,將這個樣式指定給fillStyle屬性,然後fillRect()就會生成以這個樣式填充的矩形區域。

createRadialGradient()方法定義一個輻射漸變,需要指定兩個圓。

ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

createRadialGradient()方法接受六個參數,x0和y0是輻射起始的圓的圓心坐標,r0是起始圓的半徑,x1和y1是輻射終止的圓的圓心坐標,r1是終止圓的半徑。

該方法的返回值也是一個CanvasGradient對象。

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

var gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "green");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 200);

上面代碼中,生成輻射樣式以後,用這個樣式填充一個矩形。

createPattern()方法定義一個圖像填充樣式,在指定方向上不斷重復該圖像,填充指定的區域。

ctx.createPattern(image, repetition);

該方法接受兩個參數,第一個參數是圖像數據,它可以是<img>元素,也可以是另一個<canvas>元素,或者一個表示圖像的 Blob 對象。第二個參數是一個字符串,有四個可能的值,分別是repeat(雙向重復)、repeat-x(水平重復)、repeat-y(垂直重復)、no-repeat(不重復)。如果第二個參數是空字符串或null,則等同於null。

該方法的返回值是一個CanvasPattern對象。

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

var img = new Image();
img.src = "https://example.com/pattern.png";
img.onload = function() {
  var pattern = ctx.createPattern(img, "repeat");
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 400, 400);
};

上面代碼中,圖像加載成功以後,使用createPattern()生成圖像樣式,然後使用這個樣式填充指定區域。

陰影

以下屬性用於設置陰影。

  • CanvasRenderingContext2D.shadowBlur:陰影的模糊程度,默認為0。
  • CanvasRenderingContext2D.shadowColor:陰影的顏色,默認為black。
  • CanvasRenderingContext2D.shadowOffsetX:陰影的水平位移,默認為0。
  • CanvasRenderingContext2D.shadowOffsetY:陰影的垂直位移,默認為0。

下面是一個例子。

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

ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0,0,0,0.5)";

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

Canvas API:圖像處理

CanvasRenderingContext2D.drawImage()

Canvas API 允許將圖像文件寫入畫佈,做法是讀取圖片後,使用drawImage()方法將這張圖片放上畫佈。

CanvasRenderingContext2D.drawImage()有三種使用格式。

ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

各個參數的含義如下。

  • image:圖像元素
  • sx:圖像內部的橫坐標,用於映射到畫佈的放置點上。
  • sy:圖像內部的縱坐標,用於映射到畫佈的放置點上。
  • sWidth:圖像在畫佈上的寬度,會產生縮放效果。如果未指定,則圖像不會縮放,按照實際大小占據畫佈的寬度。
  • sHeight:圖像在畫佈上的高度,會產生縮放效果。如果未指定,則圖像不會縮放,按照實際大小占據畫佈的高度。
  • dx:畫佈內部的橫坐標,用於放置圖像的左上角
  • dy:畫佈內部的縱坐標,用於放置圖像的右上角
  • dWidth:圖像在畫佈內部的寬度,會產生縮放效果。
  • dHeight:圖像在畫佈內部的高度,會產生縮放效果。

下面是最簡單的使用場景,將圖像放在畫佈上,兩者左上角對齊。

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

var img = new Image();
img.src = "image.png";
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};

上面代碼將一個 PNG 圖像放入畫佈。這時,圖像將是原始大小,如果畫佈小於圖像,就會隻顯示出圖像左上角,正好等於畫佈大小的那一塊。

如果要顯示完整的圖片,可以用圖像的寬和高,設置成畫佈的寬和高。

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

var image = new Image(60, 45);
image.onload = drawImageActualSize;
image.src = "https://example.com/image.jpg";

function drawImageActualSize() {
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;
  ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight);
}

上面代碼中,<canvas>元素的大小設置成圖像的本來大小,就能保證完整展示圖像。由於圖像的本來大小,隻有圖像加載成功以後才能拿到,因此調整畫佈的大小,必須放在image.onload這個監聽函數裡面。

像素讀寫

以下三個方法與像素讀寫相關。

  • CanvasRenderingContext2D.getImageData():將畫佈讀取成一個 ImageData 對象
  • CanvasRenderingContext2D.putImageData():將 ImageData 對象寫入畫佈
  • CanvasRenderingContext2D.createImageData():生成 ImageData 對象

(1)getImageData()

CanvasRenderingContext2D.getImageData()方法用來讀取<canvas>的內容,返回一個 ImageData 對象,包含瞭每個像素的信息。

ctx.getImageData(sx, sy, sw, sh);

getImageData()方法接受四個參數。sx和sy是讀取區域的左上角坐標,sw和sh是讀取區域的寬度和高度。如果想要讀取整個<canvas>區域,可以寫成下面這樣。

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

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

getImageData()方法返回的是一個ImageData對象。該對象有三個屬性。

  • ImageData.data:一個一維數組。該數組的值,依次是每個像素的紅、綠、藍、alpha 通道值(每個值的范圍是 0 ~ 255),因此該數組的長度等於圖像的像素寬度 x 圖像的像素高度 x 4。這個數組不僅可讀,而且可寫,因此通過操作這個數組,就可以達到操作圖像的目的。
  • ImageData.width:浮點數,表示 ImageData 的像素寬度。
  • ImageData.height:浮點數,表示 ImageData 的像素高度。

(2)putImageData()

CanvasRenderingContext2D.putImageData()方法將ImageData對象的像素繪制在<canvas>畫佈上。該方法有兩種使用格式。

ctx.putImageData(imagedata, dx, dy);
ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

該方法有如下參數。

  • imagedata:包含像素信息的 ImageData 對象。
  • dx:<canvas>元素內部的橫坐標,用於放置 ImageData 圖像的左上角。
  • dy:<canvas>元素內部的縱坐標,用於放置 ImageData 圖像的左上角。
  • dirtyX:ImageData 圖像內部的橫坐標,用於作為放置到<canvas>的矩形區域的左上角的橫坐標,默認為 0。
  • dirtyY:ImageData 圖像內部的縱坐標,用於作為放置到<canvas>的矩形區域的左上角的縱坐標,默認為 0。
  • dirtyWidth:放置到<canvas>的矩形區域的寬度,默認為 ImageData 圖像的寬度。
  • dirtyHeight:放置到<canvas>的矩形區域的高度,默認為 ImageData 圖像的高度。

下面是將 ImageData 對象繪制到<canvas>的例子。

ctx.putImageData(imageData, 0, 0);

(3)createImageData()

CanvasRenderingContext2D.createImageData()方法用於生成一個空的ImageData對象,所有像素都是透明的黑色(即每個值都是0)。該方法有兩種使用格式。

ctx.createImageData(width, height);
ctx.createImageData(imagedata);

createImageData()方法的參數如下。

  • width:ImageData 對象的寬度,單位為像素。
  • height:ImageData 對象的高度,單位為像素。
  • imagedata:一個現有的 ImageData 對象,返回值將是這個對象的拷貝。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var imageData = ctx.createImageData(100, 100);

上面代碼中,imageData是一個 100 x 100 的像素區域,其中每個像素都是透明的黑色。

CanvasRenderingContext2D.save(),CanvasRenderingContext2D.restore()

CanvasRenderingContext2D.save()方法用於將畫佈的當前樣式保存到堆棧,相當於在內存之中產生一個樣式快照。

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

ctx.save();

上面代碼中,save()會為畫佈的默認樣式產生一個快照。

CanvasRenderingContext2D.restore()方法將畫佈的樣式恢復到上一個保存的快照,如果沒有已保存的快照,則不產生任何效果。

上下文環境,restore 方法用於恢復到上一次保存的上下文環境。

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

ctx.save();

ctx.fillStyle = "green";
ctx.restore();

ctx.fillRect(10, 10, 100, 100);

上面代碼畫一個矩形。矩形的填充色本來設為綠色,但是restore()方法撤銷瞭這個設置,將樣式恢復上一次保存的狀態(即默認樣式),所以實際的填充色是黑色(默認顏色)。

CanvasRenderingContext2D.canvas

CanvasRenderingContext2D.canvas屬性指向當前CanvasRenderingContext2D對象所在的<canvas>元素。該屬性隻讀。

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

ctx.canvas === canvas; // true

圖像變換

以下方法用於圖像變換。

  • CanvasRenderingContext2D.rotate():圖像旋轉
  • CanvasRenderingContext2D.scale():圖像縮放
  • CanvasRenderingContext2D.translate():圖像平移
  • CanvasRenderingContext2D.transform():通過一個變換矩陣完成圖像變換
  • CanvasRenderingContext2D.setTransform():取消前面的圖像變換

(1)rotate()

CanvasRenderingContext2D.rotate()方法用於圖像旋轉。它接受一個弧度值作為參數,表示順時針旋轉的度數。

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

ctx.rotate((45 * Math.PI) / 180);
ctx.fillRect(70, 0, 100, 30);

上面代碼會顯示一個順時針傾斜 45 度的矩形。註意,rotate()方法必須在fillRect()方法之前調用,否則是不起作用的。

旋轉中心點始終是畫佈左上角的原點。如果要更改中心點,需要使用translate()方法移動畫佈。

(2)scale()

CanvasRenderingContext2D.scale()方法用於縮放圖像。它接受兩個參數,分別是x軸方向的縮放因子和y軸方向的縮放因子。默認情況下,一個單位就是一個像素,縮放因子可以縮放單位,比如縮放因子0.5表示將大小縮小為原來的 50%,縮放因子10表示放大十倍。

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

ctx.scale(10, 3);
ctx.fillRect(10, 10, 10, 10);

上面代碼中,原來的矩形是 10 x 10,縮放後展示出來是 100 x 30。

如果縮放因子為 1,就表示圖像沒有任何縮放。如果為-1,則表示方向翻轉。ctx.scale(-1, 1)為水平翻轉,ctx.scale(1, -1)表示垂直翻轉。

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

ctx.scale(1, -2);
ctx.font = "16px serif";
ctx.fillText("Hello world!", 20, -20);

上面代碼會顯示一個水平倒轉的、高度放大 2 倍的Hello World!。

註意,負向縮放本質是坐標翻轉,所針對的坐標軸就是畫佈左上角原點的坐標軸。

(3)translate()

CanvasRenderingContext2D.translate()方法用於平移圖像。它接受兩個參數,分別是 x 軸和 y 軸移動的距離(單位像素)。

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

ctx.translate(50, 50);
ctx.fillRect(0, 0, 100, 100);

(4)transform()

CanvasRenderingContext2D.transform()方法接受一個變換矩陣的六個元素作為參數,完成縮放、旋轉、移動和傾斜等變形。

它的使用格式如下。

ctx.transform(a, b, c, d, e, f);
/*
a:水平縮放(默認值1,單位倍數)
b:水平傾斜(默認值0,單位弧度)
c:垂直傾斜(默認值0,單位弧度)
d:垂直縮放(默認值1,單位倍數)
e:水平位移(默認值0,單位像素)
f:垂直位移(默認值0,單位像素)
*/

下面是一個例子。

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

ctx.transform(2, 0, 0, 1, 50, 50);
ctx.fillRect(0, 0, 100, 100);

上面代碼中,原始圖形是 100 x 100 的矩形,結果縮放成 200 x 100 的矩形,並且左上角從(0, 0)移動到(50, 50)。

註意,多個transform()方法具有疊加效果。

(5)setTransform()

CanvasRenderingContext2D.setTransform()方法取消前面的圖形變換,將畫佈恢復到該方法指定的狀態。該方法的參數與transform()方法完全一致。

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

ctx.translate(50, 50);
ctx.fillRect(0, 0, 100, 100);

ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

上面代碼中,第一個fillRect()方法繪制的矩形,左上角從(0, 0)平移到(50, 50)。setTransform()方法取消瞭這個變換(已繪制的圖形不受影響),將畫佈恢復到默認狀態(變換矩形1, 0, 0, 1, 0, 0),所以第二個矩形的左上角回到(0, 0)。

canvas元素的方法

除瞭CanvasRenderingContext2D對象提供的方法,<canvas>元素本身也有自己的方法。

htmlCanvasElement.toDataURL()

<canvas>元素的toDataURL()方法,可以將 Canvas數據轉為 Data URI 格式的圖像。

canvas.toDataURL(type, quality);

toDataURL()方法接受兩個參數。

  • type:字符串,表示圖像的格式。默認為image/png,另一個可用的值是image/jpeg,Chrome 瀏覽器還可以使用image/webp。
  • quality:浮點數,0 到 1 之間,表示 JPEG 和 WebP 圖像的質量系數,默認值為 0.92。

該方法的返回值是一個 Data URI 格式的字符串。

function convertCanvasToImage(canvas) {
  var image = new Image();
  image.src = canvas.toDataURL("image/png");
  return image;
}

上面的代碼將<canvas>元素,轉化成 PNG Data URI。

var fullQuality = canvas.toDataURL("image/jpeg", 0.9);
var mediumQuality = canvas.toDataURL("image/jpeg", 0.6);
var lowQuality = canvas.toDataURL("image/jpeg", 0.3);

上面代碼將<canvas>元素轉成高畫質、中畫質、低畫質三種 JPEG 圖像。

htmlCanvasElement.toBlob()

HTMLCanvasElement.toBlob()方法用於將<canvas>圖像轉成一個 Blob 對象,默認類型是image/png。它的使用格式如下。

// 格式
canvas.toBlob(callback, mimeType, quality)

// 示例
canvas.toBlob(function (blob) {...}, 'image/jpeg', 0.95)

toBlob()方法可以接受三個參數。

  • callback:回調函數。它接受生成的 Blob 對象作為參數。
  • mimeType:字符串,圖像的 MIMEType 類型,默認是image/png。
  • quality:浮點數,0 到 1 之間,表示圖像的質量,隻對image/jpeg和image/webp類型的圖像有效。

註意,該方法沒有返回值。

下面的例子將<canvas>圖像復制成<img>圖像。

var canvas = document.getElementById('myCanvas');

function blobToImg(blob) {
  var newImg = document.createElement('img');
  var url = URL.createObjectURL(blob);

  newImg.onload = functio () {
    // 使用完畢,釋放 URL 對象
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
}

canvas.toBlob(blobToImg);

Canvas 使用實例

動畫效果

通過改變坐標,很容易在畫佈 Canvas 元素上產生動畫效果。

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

var posX = 20;
var posY = 100;

setInterval(function() {
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  posX += 1;
  posY += 0.25;

  ctx.beginPath();
  ctx.fillStyle = "white";

  ctx.arc(posX, posY, 10, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();
}, 30);

上面代碼會產生一個小圓點,每隔 30 毫秒就向右下方移動的效果。setInterval()函數的一開始,之所以要將畫佈重新渲染黑色底色,是為瞭抹去上一步的小圓點。

在這個例子的基礎上,通過設置圓心坐標,可以產生各種運動軌跡。下面是先上升後下降的例子。

var vx = 10;
var vy = -10;
var gravity = 1;

setInterval(function() {
  posX += vx;
  posY += vy;
  vy += gravity;
  // ...
});

上面代碼中,x坐標始終增大,表示持續向右運動。y坐標先變小,然後在重力作用下,不斷增大,表示先上升後下降。

像素處理

通過getImageData()方法和putImageData()方法,可以處理每個像素,進而操作圖像內容,因此可以改寫圖像。

下面是圖像處理的通用寫法。

if (canvas.width > 0 && canvas.height > 0) {
  var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  filter(imageData);
  context.putImageData(imageData, 0, 0);
}

上面代碼中,filter是一個處理像素的函數。以下是幾種常見的filter。

(1)灰度效果

灰度圖(grayscale)就是取紅、綠、藍三個像素值的算術平均值,這實際上將圖像轉成瞭黑白形式。

grayscale = function(pixels) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    var r = d[i];
    var g = d[i + 1];
    var b = d[i + 2];
    d[i] = d[i + 1] = d[i + 2] = (r + g + b) / 3;
  }
  return pixels;
};

上面代碼中,d[i]是紅色值,d[i+1]是綠色值,d[i+2]是藍色值,d[i+3]是 alpha 通道值。轉成灰度的算法,就是將紅、綠、藍三個值相加後除以 3,再將結果寫回數組。

(2)復古效果

復古效果(sepia)是將紅、綠、藍三種值,分別取這三個值的某種加權平均值,使得圖像有一種古舊的效果。

sepia = function(pixels) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    var r = d[i];
    var g = d[i + 1];
    var b = d[i + 2];
    d[i] = r * 0.393 + g * 0.769 + b * 0.189; // red
    d[i + 1] = r * 0.349 + g * 0.686 + b * 0.168; // green
    d[i + 2] = r * 0.272 + g * 0.534 + b * 0.131; // blue
  }
  return pixels;
};

(3)紅色蒙版效果

紅色蒙版指的是,讓圖像呈現一種偏紅的效果。算法是將紅色通道設為紅、綠、藍三個值的平均值,而將綠色通道和藍色通道都設為 0。

var red = function(pixels) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    var r = d[i];
    var g = d[i + 1];
    var b = d[i + 2];
    d[i] = (r + g + b) / 3; // 紅色通道取平均值
    d[i + 1] = d[i + 2] = 0; // 綠色通道和藍色通道都設為0
  }
  return pixels;
};

(4)亮度效果

亮度效果(brightness)是指讓圖像變得更亮或更暗。算法將紅色通道、綠色通道、藍色通道,同時加上一個正值或負值。

var brightness = function(pixels, delta) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    d[i] += delta; // red
    d[i + 1] += delta; // green
    d[i + 2] += delta; // blue
  }
  return pixels;
};

(5)反轉效果

反轉效果(invert)是指圖片呈現一種色彩顛倒的效果。算法為紅、綠、藍通道都取各自的相反值(255 – 原值)。

invert = function(pixels) {
  var d = pixels.data;
  for (var i = 0; i < d.length; i += 4) {
    d[i] = 255 - d[i];
    d[i + 1] = 255 - d[i + 1];
    d[i + 2] = 255 - d[i + 2];
  }
  return pixels;
};

以上就是JS Canvas接口和動畫效果大全的詳細內容,更多關於JS的資料請關註WalkonNet其它相關文章!