Canvas 圖像(上)

Canvas 圖像API可以加載圖像數據，然后直接將圖像應用到畫布上。還可以裁切、拼貼圖像數據，以顯示用戶需要的部分。此外，Canvas還提供了像素數據的存儲功能，這樣就能對其進行操作并且重繪到畫布上。

1.圖像基礎

Canvas API提供對DOM定義的Image對象類型，在javascript中定義圖像，創建JavaScript的方法: var image = new Image();，然后設置圖像的源文件，只需要將URL指定給新建的Image對象的src屬性即可。代碼在調用圖像之前，必須確認其已正確加載并且準備就緒。為此可以建立一個事件監聽器，當圖像的load事件觸發時立即啟動。

一旦圖片加載完成，有多種方法可以將其顯示在屏幕上。Canvas提供了一個如下方法來將圖像數據顯示到畫布上：

drawImage(Image,sx,sy,sw,sh,dx,dy,dw,dh);

Image代表圖片對象，sx,sy代表開始復制源圖像上的“源位置”。sw和sh代表從(sx,sy)處開始取的矩形大小，dx和dx代表繪制到畫布上的位置，dw,dh代表繪制到畫布上的圖像大小。

以下代碼展示了在畫布上繪制圖片的方法：

var image = new Image();

image.addEventListener('load',eventImageLoaded,false);

image.src = 'img/1945.png';

function eventImageLoaded() {

context.drawImage(image,100,100,32,32,100,100,32,32);

}

2.幀式動畫

幀式動畫是指一項類似的現代技術，通過繪制每一個大小相同的幀來模擬動畫。Canvas 可以利用drawImage()函數以及兩個拼版來做動畫。

需要創建一個count變量來作為計數器，并且還要創建一個計時循環。

代碼示例如下：

var count= 20;

var image = new Image();

image.addEventListener('load',eventImageLoaded,false);

image.src = 'img/timg.jpg';

function eventImageLoaded() {

StartUp();

}

function StartUp() {

setInterval(drawScreen, 100);

}

drawScreen();

function drawScreen() {

context.lineWidth = 5;

context.strokeRect(0,0,theCanvas.width,theCanvas.height);

context.drawImage(image,count,20,135,80,100,100,135,90);

count += 135;

console.log(count);

if (count > 587){

count = 20;

}

}

然后可以生成這樣一個動畫：

總結

以上是生活随笔為你收集整理的从0到1 html5 canvas,Html5 Canvas学习之路（五）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。