Html5 Canvas学习之路（五） - HelloWorld开发者社区

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


    }

然后可以生成这样一个动画：

Html5 Canvas学习之路（五）