站長(zhǎng)資訊網(wǎng)本文主要用到的知識(shí)
本文主要用到了Canvas API中的drawImage方法，下面對(duì)此方法略做介紹。
在Canvas API中繪制圖像用drawImage方法，這是一個(gè)重載方法，定義如下：
context.drawImage(image,x,y); context.drawImage(image,x,y,w,h); context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
第一個(gè)方法有三個(gè)參數(shù)，第一個(gè)參數(shù)為要繪制的圖像(還可以是video元素)，x和y為該圖像在畫(huà)布中的起始坐標(biāo)。
第二個(gè)方法有五個(gè)參數(shù)，前三個(gè)跟第一個(gè)方法意義一樣，w和h指繪制時(shí)的圖像寬度和高度，可以用來(lái)進(jìn)行圖像縮放。
第三個(gè)方法有九個(gè)參數(shù)，第一個(gè)參數(shù)跟前二個(gè)方法意義相同，后八個(gè)參數(shù)中前四個(gè)在源圖像上一取一個(gè)矩形，后四個(gè)參數(shù)用于在畫(huà)布上定義一個(gè)矩形，整個(gè)方法的作用就是把源圖像上部分區(qū)域(第二到五個(gè)參數(shù)定義的部分)復(fù)制到畫(huà)布上(后四個(gè)參數(shù)定義的部分)。
本文主要利用了第三個(gè)方法完成繪制。
源代碼
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>用動(dòng)畫(huà)的形式切換圖片</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>用動(dòng)畫(huà)的形式切換圖片</h1> <canvas id="canvas" width="192px" height="255px"></canvas></body></html>
代碼解析
drawleftToRight()：效果為從左向右顯示，主要把第四個(gè)參數(shù)和第八個(gè)參數(shù)從0逐漸增加到圖片的寬度
drawtopToBottom()：效果為從上向下顯示，主要把第五個(gè)參數(shù)和第九個(gè)參數(shù)從0逐漸增加到圖片的高度
drawhcenter()：效果為從中間水平向兩邊顯示，主要把第二、六個(gè)參數(shù)從圖像寬度的一半減小到0，第四、八個(gè)參數(shù)從0增加到圖像寬度
drawvcenter()：效果為從中間向上下兩邊顯示，跟上一個(gè)類(lèi)似
drawhwindow()：效果為水平方向百葉窗，跟drawhcenter方法原理類(lèi)似，只是這里是從多個(gè)地方進(jìn)行的
drawvwindow()：效果為垂直方面百葉窗，跟drawvcenter方法原理類(lèi)似，只是這里是從多個(gè)地方進(jìn)行的
drawhvwindow()：效果為百葉窗，是drawhwindow()跟drawvwindow()的組合
歡迎大家補(bǔ)充和完善。
由于圖片是放在其他網(wǎng)站上，所以加載比較慢，顯的不是那么流暢，大家使用時(shí)可以換為本地圖片，效果更佳。
