Html5 Canvas學習之路（五）

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;
        }


    }

而後能夠生成這樣一個動畫：