本文主要用到的知识
本文主要用到了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/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()的组合
欢迎大家补充和完善。
由于图片是放在其他网站上，所以加载比较慢，显的不是那么流畅，大家使用时可以换为本地图片，效果更佳。
以上是HTML5编程实战之二-使用动画的形式切换图片代码案例的详细内容。更多信息请关注PHP中文网其他相关文章！
掌握microdata：HTML5的分步指南May 14, 2025 am 12:07 AMMicrodatainhtml5enhancesseoanduserexperienceByByBybyBystructuredDatatoSearchEngines.1）useIteMscope，itemType，anditempropattributestomarkupcontentlikeSoreRoductSssSssSoRorevents.2）
HTML5表格中有什么新功能？探索新输入类型May 13, 2025 pm 03:45 PMhtml5introducesnewinputtypesthatenhanceserexperience，简化开发和iMproveAccessibility.1）自动validatesemailformat.2）优化优化，优化OmportizeSmizesemizesemizesemizesemizesemizeSmobobileWithAnumericKeyPad.3）和SimimplifyDtimePutputientiputiNputiNputits。
理解H5：含义和意义May 11, 2025 am 12:19 AMH5是HTML5，是HTML的第五个版本。HTML5提升了网页的表现力和交互性，引入了语义化标签、多媒体支持、离线存储和Canvas绘图等新特性，推动了Web技术的发展。
H5：可访问性和网络标准合规性May 10, 2025 am 12:21 AM无障碍访问和网络标准遵循对网站至关重要。1）无障碍访问确保所有用户都能平等访问网站，2）网络标准遵循提高网站的可访问性和一致性，3）实现无障碍访问需使用语义化HTML、键盘导航、颜色对比度和替代文本，4）遵循这些原则不仅是道德和法律要求，还能扩大用户群体。
HTML中的H5标签是什么？May 09, 2025 am 12:11 AMHTML中的H5标签是第五级标题，用于标记较小的标题或子标题。1)H5标签帮助细化内容层次，提升可读性和SEO。2)结合CSS可定制样式，增强视觉效果。3)合理使用H5标签，避免滥用，确保内容结构逻辑性。
H5代码：Web结构的初学者指南May 08, 2025 am 12:15 AMHTML5构建网站的方法包括：1.使用语义化标签定义网页结构，如、、等；2.嵌入多媒体内容，使用和标签；3.应用表单验证和本地存储等高级功能。通过这些步骤，你可以创建一个结构清晰、功能丰富的现代网页。
H5代码结构：组织内容以实现可读性May 07, 2025 am 12:06 AM通过合理的H5代码结构可以让页面在众多内容中脱颖而出。1)使用语义化标签如、、等组织内容，使结构清晰。2)通过CSS布局如Flexbox或Grid控制页面在不同设备上的呈现效果。3)实现响应式设计，确保页面在不同屏幕尺寸上自适应。
H5与较旧的HTML版本：比较May 06, 2025 am 12:09 AMHTML5（H5）与旧版本HTML的主要区别包括：1）H5引入了语义化标签，2）支持多媒体内容，3）提供离线存储功能。H5通过新标签和API增强了网页的功能和表现力，如和标签，提高了用户体验和SEO效果，但需注意兼容性问题。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
Dreamweaver Mac版
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
WebStorm Mac版
好用的JavaScript开发工具
Atom编辑器mac版下载
最流行的的开源编辑器
DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中
