程式設計HTML5 Canvas API _html5教學技巧-H5教程-PHP中文網

複製程式碼

程式碼如下:

}

}

)

加入Canvas

複製程式碼

程式碼如下:

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

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

//用絕對座標來建立一條路徑context.beginPath();context.moveTo(70, 140);context.lineTo(140, 70);//將這條線繪製到Canvas上

context.stroke();

變換

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

用變換的方式繪製對角線

複製程式碼

程式碼如下:

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

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 createCanopy> // 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.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將不會顯示任何圖片，因此，特別注意，在呈現之前，應確保圖片已載入完畢。

複製程式碼程式碼如下:

// 圖片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);

背景圖

複製程式碼

程式碼如下:

// 載入圖片gravel.src = "gravel.jpg";

gravel.onload = function () {
drawTrails();
}

// 用背景圖取代棕色粗線
context.strokeStyle = context.createPattern(gravel, 'repeat');
context.lineWidth = 20;
context.stroke();

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

縮放

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

複製程式碼

程式碼如下:

// 在X=130,=130, 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);