本文主要用到的知識
本文主要用到了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()的組合
歡迎大家補充和完善。
由於圖片是放在其他網站上，所以加載比較慢，顯的不是那么流暢，大家使用時可以換為本地圖片，效果更佳。