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

百变鹏仔 2个月前 (10-18) #H5教程

文章标签之二

本文主要用到的知识

本文主要用到了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(&#39;canvas&#39;);            context = canvas.getContext(&#39;2d&#39;);            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编程实战之二-使用动画的形式切换图片代码案例

本文主要用到的知识

源代码

代码解析

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集