程式設計HTML5 Canvas API _html5教學技巧

複製程式碼

程式碼如下:

}

}

}

}

}



)


加入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);

context.restore();

一種變換的使用方法

複製程式碼程式碼如下:

// 儲存目前狀態

// 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屬性來控制陰影

複製代碼

代碼如下:

// 顏色，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上目前呈現的數據，所獲得的數據以文字格式儲存，瀏覽器能解析成圖像。