Canvas 圖像(上)

Canvas 圖像API可以加載圖像數(shù)據(jù)，然后直接將圖像應(yīng)用到畫布上。還可以裁切、拼貼圖像數(shù)據(jù)，以顯示用戶需要的部分。此外，Canvas還提供了像素?cái)?shù)據(jù)的存儲(chǔ)功能，這樣就能對(duì)其進(jìn)行操作并且重繪到畫布上。

1.圖像基礎(chǔ)

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

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

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

Image代表圖片對(duì)象，sx,sy代表開始復(fù)制源圖像上的“源位置”。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.幀式動(dòng)畫

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

需要?jiǎng)?chuàng)建一個(gè)count變量來作為計(jì)數(shù)器，并且還要?jiǎng)?chuàng)建一個(gè)計(jì)時(shí)循環(huán)。

代碼示例如下：

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;

}

}

然后可以生成這樣一個(gè)動(dòng)畫：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。