HTML5编程实战之二：用动画的形式切换图片
生活随笔
收集整理的這篇文章主要介紹了
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()的組合
歡迎大家補充和完善。
由于圖片是放在其他網站上，所以加載比較慢，顯的不是那么流暢，大家使用時可以換為本地圖片，效果更佳。
轉載于:https://www.cnblogs.com/jscode/archive/2012/04/11/2442982.html
總結
以上是生活随笔為你收集整理的HTML5编程实战之二：用动画的形式切换图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： KindEditor 4 输入框限定字数
- 下一篇： 2017年html5行业报告,云适配发布