HTML5编程实战之二-使用动画的形式切换图片代码案例

来源：动视网责编：小采时间：2020-11-27 15:10:06

HTML5编程实战之二-使用动画的形式切换图片代码案例

HTML5编程实战之二-使用动画的形式切换图片代码案例:本文主要用到的知识本文主要用到了http://www.gxlcms.com/code/72.html target=_blank

推荐度：

点击下载本文 文档为doc格式

导读HTML5编程实战之二-使用动画的形式切换图片代码案例:本文主要用到的知识本文主要用到了http://www.gxlcms.com/code/72.html target=_blank

本文主要用到的知识

　　本文主要用到了http://www.gxlcms.com/code/72.html" target="_blank">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指绘制时的图像宽度和高度，可以用来进行图像缩放。

　　第三个方法有九个参数，第一个参数跟前二个方法意义相同，后八个参数中前四个在源图像上一取一个矩形，后四个参数用于在画布上定义一个矩形，整个方法的作用就是把源图像上部分区域(第二到五个参数定义的部分)复制到画布上(后四个参数定义的部分)。

　　本文主要利用了第三个方法完成绘制。

源代码

<!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/b1ba743ba617be21fa06b67d795511.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>