从0到1 html5 canvas,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;

}

}

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