HTML5编程实战之二：用动画的形式切换图片
本文主要用到的知识
本文主要用到了Canvas API中的drawImage方法，下面对此方法略做介绍。
在Canvas API中绘制图像用drawImage方法，这是一个重载方法，定义如下：
context.drawImage(image,x,y);
context.drawImage(image,x,y,w,h);
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
第一个方法有三个参数，第一个参数为要绘制的图像(还可以是video元素)，x和y为该图像在画布中的起始坐标。
第二个方法有五个参数，前三个跟第一个方法意义一样，w和h指绘制时的图像宽度和高度，可以用来进行图像缩放。
第三个方法有九个参数，第一个参数跟前二个方法意义相同，后八个参数中前四个在源图像上一取一个矩形，后四个参数用于在画布上定义一个矩形，整个方法的作用就是把源图像上部分区域(第二到五个参数定义的部分)复制到画布上(后四个参数定义的部分)。
关于这三个方法的更详细的请参考：https://developer.mozilla.org/en/Canvas_tutorial/Using_images
本文主要利用了第三个方法完成绘制。
源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用动画的形式切换图片</title> <script type="text/javascript"> var width, height; var context, image, functionId; var drawLeft, drawWidth; var drawTop, drawHeight; var spaceWidth, spaceHeight; var speed=5000; var images = ["http://i.6.cn/cvbnm/4e/7e/bb/75f251a8e2ae935d598f17b4f8275060.jpg", "http://i.6.cn/cvbnm/4a/6e/fb/805175016e502c483b75276f29801df3.jpg", "http://i.6.cn/cvbnm/6a/72/18/1787a3b2754ef48e374bbd14635f5c36.jpg", "http://i.6.cn/cvbnm/94/55/6c/b1ba743ba617be2891fa06b67d795511.jpg", "http://i.6.cn/cvbnm/02/1b/04/8018ee9e5756ac6b30f27d7ad6396b03.jpg", "http://i.6.cn/cvbnm/85/ea/d1/65f15857b971afb3b6e38b5fcdadc9c0.jpg"]; function selectFrom(iFirstValue, iLastValue) { var iChoices = iLastValue - iFirstValue + 1; return Math.floor(Math.random() * iChoices + iFirstValue); } function showPicture(effects) { var count = 0; for (var o in effects) { count++; } var canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); width = canvas.width; height = canvas.height; var currImage = 0; image = new Image(); image.src = images[currImage]; context.drawImage(image, 0, 0, width, height); currImage++; if (count > 0) { setInterval(function () { var rand = selectFrom(0, count - 1); image.src = images[currImage]; currImage++; if (currImage == images.length) { currImage = 0; } var index = 0; for (var effect in effects) { if (index++ == rand) { effects[effect](); break; } } }, speed); } } window.onload=function(){ showPicture({ leftToRight: function () { context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, width, height); drawWidth = 0; functionId = self.setInterval("drawleftToRight()", 10); }, topToBottom: function () { context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, width, height); drawHeight = 0; functionId = self.setInterval("drawtopToBottom()", 10); }, hcenter: function () { context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, width, height); drawLeft = width / 2; drawWidth = 0; functionId = self.setInterval("drawhcenter()", 10); }, vcenter: function () { context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, width, height); drawTop = height / 2; drawHeight = 0; functionId = self.setInterval("drawvcenter()", 10); }, hwindow: function () { context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, width, height); spaceWidth = width / 10; drawWidth = 0; functionId = self.setInterval("drawhwindow()", 50); }, vwindow: function () { context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, width, height); spaceHeight = height / 10; drawHeight = 0; functionId = self.setInterval("drawvwindow()", 50); }, hvwindow: function () { context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, width, height); spaceHeight = height / 10; spaceWidth = width / 10; drawWidth = 0; drawHeight = 0; functionId = self.setInterval("drawhvwindow()", 50); } }); } function drawleftToRight() { context.drawImage(image, 0, 0, drawWidth, image.height, 0, 0, drawWidth, image.height); drawWidth = drawWidth + 2; if (drawWidth > width) { window.clearInterval(functionId); } } function drawtopToBottom() { context.save(); context.drawImage(image, 0, 0, image.width, drawHeight, 0, 0, image.width, drawHeight); drawHeight = drawHeight + 2; if (drawHeight > height) { window.clearInterval(functionId); } context.restore(); } function drawhcenter() { context.save(); context.drawImage(image, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height); drawLeft = drawLeft - 1; drawWidth = drawWidth + 2; if (drawLeft <= 0) { window.clearInterval(functionId); } context.restore(); } function drawvcenter() { context.save(); context.drawImage(image, 0, drawTop, image.width, drawHeight, 0, drawTop, image.width, drawHeight); drawTop = drawTop - 1; drawHeight = drawHeight + 2; if (drawTop <= 0) { window.clearInterval(functionId); } context.restore(); } function drawhwindow() { for (i = 0; i < 10; i++) { context.drawImage(image, 0 + i * spaceWidth, 0, drawWidth, image.height, 0 + i * spaceWidth, 0, drawWidth, image.height); } drawWidth += 1; if (drawWidth - 1 > spaceWidth) { window.clearInterval(functionId); } } function drawvwindow() { context.save(); context.clearRect(0, 0, width, height); for (i = 0; i < 10; i++) { context.drawImage(image, 0, 0 + i * spaceHeight, image.width, drawHeight, 0, 0 + i * spaceHeight, image.width, drawHeight); } drawHeight += 1; if (drawHeight - 1 > spaceHeight) { window.clearInterval(functionId); } context.restore(); } function drawhvwindow() { context.save(); context.clearRect(0, 0, width, height); for (i = 0; i < 10; i++) { for (j = 0; j < 10; j++) { context.drawImage(image, 0 + j * spaceWidth, 0 + i * spaceHeight, drawWidth, drawHeight, 0 + j * spaceWidth, 0 + i * spaceHeight, drawWidth, drawHeight); } } drawHeight += height / width; drawWidth += 1; if (drawHeight > spaceHeight) { context.drawImage(image, 0, 0, width, height); window.clearInterval(functionId); } context.restore(); } </script> </head> <body> <h1>用动画的形式切换图片</h1> <canvas id="canvas" width="192px" height="255px"></canvas> </body> </html>
代码解析
drawleftToRight()：效果为从左向右显示，主要把第四个参数和第八个参数从0逐渐增加到图片的宽度
drawtopToBottom()：效果为从上向下显示，主要把第五个参数和第九个参数从0逐渐增加到图片的高度
drawhcenter()：效果为从中间水平向两边显示，主要把第二、六个参数从图像宽度的一半减小到0，第四、八个参数从0增加到图像宽度
drawvcenter()：效果为从中间向上下两边显示，跟上一个类似
drawhwindow()：效果为水平方向百叶窗，跟drawhcenter方法原理类似，只是这里是从多个地方进行的
drawvwindow()：效果为垂直方面百叶窗，跟drawvcenter方法原理类似，只是这里是从多个地方进行的
drawhvwindow()：效果为百叶窗，是drawhwindow()跟drawvwindow()的组合
欢迎大家补充和完善。
由于图片是放在其他网站上，所以加载比较慢，显的不是那么流畅，大家使用时可以换为本地图片，效果更佳。