HTML5编程实战之二-使用动画的形式切换图片代码案例
程序员文章站
2022-05-09 21:07:26
...
本文主要用到的知识
本文主要用到了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编程实战之二-使用动画的形式切换图片代码案例的详细内容，更多请关注其它相关文章！