本文主要用到的知识

　　本文主要用到了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编程实战之二：用动画的形式切换图片相关推荐

html5中切换图片怎么做,HTML5编程实战之二：用动画的形式切换图片
用动画的形式切换图片 varwidth, height;varcontext, image, functionId;vardrawLeft, drawWidth;vardrawTop, drawHei ...
52 jQuery-使用slideToggle()方法的动画效果自动切换图片的高度
1.效果图 2.HTML代码 <!DOCTYPE html> <html> <head><meta charset="utf-8"> ...
C#多线程编程实战（二）
1.1 简介为了防止一个应用程序控制CPU而导致其他应用程序和操作系统本身永远被挂起这一可能情况,操作系统不得不使用某种方式将物理计算分割为一些虚拟的进程,并给予每个执行程序一定量的计算能力.此外操 ...
java并发编程实战（二）
java并发编程中常常会用到两种容器来存放一些数据,这些数据需要保证能在多线程下正常访问.常见的容器分为两类:同步容器和并发容器.在java并发编程实战一书中的第五章也有讲解. 什么是同步容器以及优劣 ...
QGIS 3.14|地震数据动画效果实战（二）动画设置篇
01 设置图层Temporal属性在QGIS 3.14中,图层的属性对话框首次加入了 Temporal标签页,提供图层的时间设置. 右键点击[图层]面板中的"quake2020" ...
基于引擎开发HTML5游戏实战（二）---游戏剧本
STEP2 设计游戏情节体验基于引擎开发游戏之后,让我深切感受到,游戏=情节+美工+引擎,编程技术在里面不是决定性因素.一个游戏成功与否很关键的一点是导演和编剧,这和电影电视很类似.当然,两个小时之 ...
java并发编程实战（二）-并发工具类
14 | Lock和Condition(上):隐藏在并发包中的管程并发编程领域,有两大核心问题:一个是互斥,即同一时刻只允许一个线程访问共享资源:另一个是同步,即线程之间如何通信.协作 Java S ...
C#多线程编程实战（二）：线程同步
2.1 简介竞争条件:多个线程同时使用共享对象.需要同步这些线程使得共享对象的操作能够以正确的顺序执行线程同步问题:多线程的执行并没有正确的同步,当一个线程执行递增和递减操作时,其他线程需要依次等 ...
HTML5+CSS3实战（二）——照片墙效果
现在的前端做的越来越炫酷了,各种特效让人眼花缭乱. 前几天逛网站的时候,看见有个照片墙的效果不错,就想着自己也做做看. 首先上图: 照片呈不规则的角度摆放,当鼠标放在照片上时,照片会放大: 鼠标离开照 ...

HTML5编程实战之二：用动画的形式切换图片

本文主要用到的知识

源代码

代码解析

HTML5编程实战之二：用动画的形式切换图片相关推荐

最新文章

热门文章