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


    }

而后能够生成这样一个动画：