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;
}
}
然后可以生成这样一个动画: