程序設計HTML5 Canvas API

作者：Eve Cole 更新時間：2025-04-04 20:48:02

try

{

document.createElement("Canvas").getContext("2d");

document.getElementById("support").innerHTML = "OK";

}

catch (e)

{

document.getElementById("support").innerHTML = e.message;

}

</script>

加入Canvas

//取得Canvas元素及其繪圖上下文var canvas = document.getElementById("diagonal");

var context = canvas.getContext("2d");

//用絕對坐標來創建一條路徑

context.beginPath();

context.moveTo(70, 140);

context.lineTo(140, 70);

//將這條線繪製到Canvas上

context.stroke();

變換

可以通過變換(縮放、平移、旋轉)等達到和上面相同的效果。

用變換的方式繪製對角線

//取得Canvas元素及其繪圖上下文

var canvas = document.getElementById("diagonal");

var context = canvas.getContext("2d");

//保存當前繪圖狀態

context.save();

//向右下方移動繪圖上下文

context.translate(70, 140);

//以原點為起點，繪製與前面相同的線段

context.beginPath();

context.moveTo(0, 0);

context.lineTo(70, -70);

context.stroke();context.restore();

路徑

HTML5 Canvas API中的路徑代表你希望呈現的任何形狀。

beginPath():不論開始繪製何種圖形，第一個需要調用的就是beginPath。這個簡單的函數不帶任何參數，它用來通知canvas將要開始繪製一個新的圖形了。

moveTo(x,y):不繪製，將當前位置移動到新的目標坐標(x,y)。

lineTo(x,y):不僅將當前位置移動到新的目標坐標(x,y)，而且在兩個坐標之間畫一條直線。

closePath():這個函數行為和lineTo很像，唯一的差別在於closePath會將路徑的起始坐標自動作為目標坐標。它還會通知canvas當前繪製的圖形已經閉合或者形成了完全封閉區域，這對將來的填充和描邊都非常有用。

繪製一個松樹地樹冠

function createCanopyPath(context) {

// Draw the tree canopy

context.beginPath();context.moveTo(-25, -50);

context.lineTo(-10, -80);

context.lineTo(-20, -80);

context.lineTo(-5, -110);

context.lineTo(-15, -110);// 樹的頂點

context.lineTo(0, -140);context.lineTo(15, -110);

context.lineTo(5, -110);

context.lineTo(20, -80);

context.lineTo(10, -80);

context.lineTo(25, -50);

// 連接起點，閉合路徑

context.closePath();

}function drawTrails() {

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

var context = canvas.getContext('2d');context.save();

context.translate(130, 250);// 創建表現樹冠的路徑

createCanopyPath(context);// 繪製當前路徑

context.stroke();

context.restore();

}window.addEventListener("load", drawTrails, true);

描邊樣式

通過描邊模式，可以讓樹冠看起來更加真實。

//加寬線條

context.lineWidth = 4;

//平滑路徑的接合點

context.lineJoin = 'round';

//顏色

context.strokeStyle = '#663300';

// 繪製當前路徑

context.stroke();

填充樣式

context.fillStyle = #339900; context.fill();繪製矩形

我們給樹增加樹幹

context.fillStyle = '#663300'; context.fillRect(-5, -50, 10, 50);繪製曲線

context.save();

context.translate(-10, 350);

context.beginPath();// 第一條曲線向右上方彎曲

context.moveTo(0, 0);

context.quadraticCurveTo(170, -50, 260, -190);// 向右下方彎曲

context.quadraticCurveTo(310, -250, 410, -250);// Draw the path in a wide brown stroke

context.strokeStyle = '#663300';

context.lineWidth = 20;

context.stroke();// Restore the previous canvas state

context.restore();

在Canvas中插入圖片

必須等到圖片完全加載後才能對其進行操作。瀏覽器通常會在頁面腳本執行時異步加載圖片，如果試圖在圖片未完全加載之前就將其呈現到canvas上，那麼canvas將不會顯示任何圖片，因此，特別注意，在呈現之前，應確保圖片已加載完畢。

// 加載圖片

var bark = new Image();

bark.src = "bark.jpg";// 圖片加載完成後，再調用繪圖的函數

bark.onload = function () {

drawTrails();

}

顯示圖片：

//用背景圖案填充，作為樹幹的背景context.drawImage(bark, -5, -50, 10, 50);漸變

使用漸變需要三個步驟：

(1)創建漸變對象

(2)為漸變對象設置顏色，指明過渡方式

(3)在context上為填充樣式或者描邊樣式設置漸變

// 創建用作樹乾紋理的三階水平漸變

var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);// 樹幹的左側邊緣是一般程度的棕色

trunkGradient.addColorStop(0, '#663300');// 樹幹中間偏左的位置顏色要談一些

trunkGradient.addColorStop(0.4, '#996600');// 右側邊緣的顏色要深一些

trunkGradient.addColorStop(1, '#552200');// 使用漸變填充樹幹

context.fillStyle = trunkGradient;

context.fillRect(-5, -50, 10, 50);

// 創建垂直漸變，以用樹冠在樹幹上的投影

var canopyShadow = context.createLinearGradient(0, -50, 0, 0);

// 投影漸變的起點是透明度為50%的黑色

canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');

// 方向垂直向下，漸變在很短的距離內迅速漸變到完全透明，這段長度之外

//的樹幹上沒有投影

canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');// 在樹幹上填充投影漸變

context.fillStyle = canopyShadow;

context.fillRect(-5, -50, 10, 50);

背景圖

// 加載圖片

var gravel = new Image();

gravel.src = "gravel.jpg";

gravel.onload = function () {

drawTrails();

}// 用背景圖替代棕色粗線條

context.strokeStyle = context.createPattern(gravel, 'repeat');

context.lineWidth = 20;

context.stroke();

context.createPattern的第二個參數是重複性標記，可以在表2-1中選擇合適的值。

平鋪方式	意義
repeat	(默認值)圖片會在兩個方向平鋪
repeat-x	橫向平鋪
repeat-y	縱向平鋪
no-repeat	圖片只顯示一次，不平鋪

縮放

縮放函數context.scale(x,y)：x,y分別代表在x,y兩個維度的值。每個參數在canvas顯示圖像的時候，向其傳遞在本方向軸上圖像要放大(或縮小)的量。如果x值為2，就代表所繪製圖像中全部元素會變成兩倍寬，如果y值為0。5，繪製出來的圖像會變成之前的一半高。

// 在X=130, Y=250 處繪製第一棵樹

context.save();

context.translate(130, 250);

drawTree(context);

context.restore();// 在X=260, Y=500 處繪製第二棵樹

context.save();

context.translate(260, 500);// 將第二棵樹的高寬放大到原來的2倍

context.scale(2, 2);

drawTree(context);

context.restore();

旋轉

旋轉圖像

context.save();

//旋轉角度參數以弧度為單位

context.rotate(1.57);

context.drawImage(myImage, 0, 0, 100, 100);context.restore();

一種變換的使用方法

// 保存當前狀態

context.save();// X值隨著Y值增加而增加，借助拉伸變換，

// 可以創建一棵用作陰影的傾斜的樹

// 應用了變換以後，所有坐標都與矩陣相乘

context.transform(1, 0,

-0.5, 1,

, 0);// 在Y軸方向，將陰影高度變為原來的60%

context.scale(1, 0.6);// 使用透明度為20%的黑色填充樹幹

context.fillStyle = 'rgba(0, 0, 0, 0.2)';

context.fillRect(-5, -50, 10, 50);// 使用已有的陰影效果重新繪製樹

createCanopyPath(context);

context.fill();// 恢復之前的canvas狀態

context.restore();

文字

context.fillText(text,x,y,maxwidth):text文本內容，x,y指定文本位置,maxwidth是可選參數，限製文本位置。

context.strokeText(text,x,y,maxwidth):text文本內容，x,y指定文本位置,maxwidth是可選參數，限製文本位置。

// 在canvas上繪製文本

context.save();// 字號為60,字體為Impact

context.font = "60px impact";//填充顏色

context.fillStyle = '#996600';

//居中

context.textAlign = 'center';//繪製文本

context.fillText('Happy Trails!', 200, 60, 400);

context.restore();

陰影

可以通過幾種全局context屬性來控制陰影

屬性	值	備註
shadowColor	任何CSS中的顏色值	可以使用透明度（alpha）
shadowOffsetX	像素值	值為正數，向右移動陰影;為負數，向左移動陰影
shadowOffsetY	像素值	值為正數，向下移動陰影;為負數，向上移動陰影
shadowBlur	高斯模糊值	值越大，陰影邊緣越模糊

// 顏色黑色，20%透明度

context.shadowColor = 'rgba(0, 0, 0, 0.2)';// 向右移動15px,向左移動10px

context.shadowOffsetX = 15;

context.shadowOffsetY = -10;// 輕微模糊陰影

context.shadowBlur = 2;

像素數據

context.getImageData(sx, sy, sw, sh)：sx,xy確定一個點，sw:寬度，sh:高度。

這個函數返回三個屬性：width 每行有多少個像素height 每列有多少個像素

data 一堆數組，存有從canvas獲取的每個像素的RGBA值（值紅、綠、藍和透明度）。

context.putImageData(imagedata,dx,dy)：允許開發人員傳入一組圖像數據，dx,dy用來指定偏移量，如果使用，則該函數就會跳到指定的canvas位置去更新

顯示傳進來的像素數據。

canvas.toDataUrl：可以通過編程獲取canvas上當前呈現的數據，獲得的數據以文本格式保存，瀏覽器能將其解析成圖像。