HTML5简单入门系列（九）

前言

上篇本来应该就是最后一篇了，但是楼主总觉得没有写上一个简单应用，不算是完整的学习系列。所以增加一篇关于动画的应用，对一个开源动画的介绍（很基础，非楼主原创）。

本篇介绍一个基于Canvas的发光加载动画（这里可下载源码）。算是对之前系列的各个知识点的一个总结吧。

我们先看看最终的效果截图：

新建一个html和一个js文件

html文件引入该js，并加了一个背景黑色，大体如下这样：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>HTML5 Canvas发光Loading动画DEMO演示</title>

     <style>

         body {

             background: #;

         }

     </style>

 </head>

 <body>

     <canvas id="c"></canvas>

     <script src="js/index.js"></script>

 </body>

 </html>

在画图之前，我们要确定一下简单的数据结构。

看效果图可以知道，我们是要画弧线，所有的动画都是基于这个弧线来操作的，那我们就要确定该弧线的坐标、半径、弧度起始点等。

要让其动起来，即旋转起来，我们需要旋转速度（弧度），当前旋转角度等。

我们整理成如下变量：

 var c = document.getElementById('c'),

 ctx = c.getContext('2d'),

 cw = c.width = ,

 ch = c.height = ,

 rand = function (a, b) { return ~~((Math.random() * (b - a + )) + a); },//获取a到b之间的整数值

 dToR = function (degrees) { return degrees * (Math.PI / ); },//角度变弧度

 circle = {

 x: (cw / ) + ,

 y: (ch / ) + ,//圆心坐标

 radius: ,//半径

 speed: ,//旋转速度（角度）

 rotation: ,//当前角度

 angleStart: ,//圆弧起始弧度

 angleEnd: ,//结束弧度

 hue: ,//色调

 thickness: ,//边缘粗细

 blur: //模糊度

 },

 particles = [],//亮点数组

 particleMax = ,//亮点个数

19-29行的变量示例中增加其他效果时会用到，这里可以暂时忽略。

画弧线

该弧线带有一个渐变效果，我们会用到的APIs有arc()，createLinearGradient()等，方法如下：

 renderCircle = function () {

         ctx.save();//保存当前作图上下文

         ctx.translate(circle.x, circle.y);//移动坐标原点到圆心位置

         ctx.beginPath();

         ctx.arc(, , circle.radius, dToR(circle.angleStart), dToR(circle.angleEnd), true);

         ctx.lineWidth = circle.thickness;

         var gradient1 = ctx.createLinearGradient(, -circle.radius, , circle.radius);

         gradient1.addColorStop(, 'hsla(' + circle.hue + ', 60%, 50%, .25)');

         gradient1.addColorStop(, 'hsla(' + circle.hue + ', 60%, 50%, 0)');

         ctx.strokeStyle = gradient1;//弧线是渐变色

         ctx.stroke();

         ctx.restore();//画完弧线之后，画其他东西之前，先恢复作图上下文

     },

这里就不截图看效果了，就是一条渐变弧线。

旋转

这里旋转其实就很简单了，只要不停地旋转角度，在画弧线之前调用旋转API rotate()就可以了。下边是代码：

 updateCircle = function () {

         if (circle.rotation < ) {

             circle.rotation += circle.speed;

         } else {

             circle.rotation = ;

         }

     }

我们可以在画弧线的方法中加入旋转角度（renderCircle 方法第四行加上下边这句即可）：

ctx.rotate(dToR(circle.rotation));//旋转角度，此处是动画动起来的地方。

说到这里，其实关于动画的内容就写的差不多了，只要一个定时器不停地调用这两个方法就好了。

不过，要注意一点，每次重新画图之前我们都要将canvas清空，我们调用clearRect或者统一写一个初始化方法即可，如下：

 clear = function () {

         ctx.globalCompositeOperation = 'destination-out';

         ctx.fillStyle = 'rgba(0, 0, 0, .1)';

         ctx.fillRect(, , cw, ch);

         ctx.globalCompositeOperation = 'lighter';

     }

定时器统一调用方法：

 loop = function () {

     clear();

     updateCircle();

     renderCircle();

 }

设置定时器：

setInterval(loop, );

现在的效果已经出来了：

剩下的就是给弧线增加效果了。

该示例中为了更好地展示效果，设置了弧线边缘，头部发亮及小亮点显隐等多个效果，园友可运行代码查看效果。

完整的js代码如下：

 /* super inefficient right now, could be improved */

 //http://www.html5tricks.com/html5-canvas-shine-loading.html

 var c = document.getElementById('c'),

     ctx = c.getContext('2d'),

     cw = c.width = ,

     ch = c.height = ,

     rand = function (a, b) { return ~~((Math.random() * (b - a + )) + a); },//获取a到b之间的整数值

     dToR = function (degrees) { return degrees * (Math.PI / ); },//角度变弧度

     circle = {

         x: (cw / ) + ,

         y: (ch / ) + ,//圆心坐标

         radius: ,//半径

         speed: ,//旋转速度（角度）

         rotation: ,//当前角度

         angleStart: ,//圆弧起始弧度

         angleEnd: ,//结束弧度

         hue: ,//色调

         thickness: ,//边缘粗细

         blur: //模糊度

     },

     particles = [],//亮点数组

     particleMax = ,//亮点个数

     //更新旋转角度

     updateCircle = function () {

         if (circle.rotation < ) {

             circle.rotation += circle.speed;

         } else {

             circle.rotation = ;

         }

     },

     //画弧线

     renderCircle = function () {

         ctx.save();//保存当前作图上下文

         ctx.translate(circle.x, circle.y);//移动坐标原点到圆心位置

         ctx.rotate(dToR(circle.rotation));//旋转角度，此处是动画动起来的地方。

         ctx.beginPath();

         ctx.arc(, , circle.radius, dToR(circle.angleStart), dToR(circle.angleEnd), true);

         ctx.lineWidth = circle.thickness;

         var gradient1 = ctx.createLinearGradient(, -circle.radius, , circle.radius);

         gradient1.addColorStop(, 'hsla(' + circle.hue + ', 60%, 50%, .25)');

         gradient1.addColorStop(, 'hsla(' + circle.hue + ', 60%, 50%, 0)');

         ctx.strokeStyle = gradient1;//弧线是渐变色

         ctx.stroke();

         ctx.restore();//画完弧线之后，画其他东西之前，先恢复作图上下文

     },

     //弧线边缘效果

     renderCircleBorder = function () {

         ctx.save();

         ctx.translate(circle.x, circle.y);

         ctx.rotate(dToR(circle.rotation));

         ctx.beginPath();

         ctx.arc(, , circle.radius + (circle.thickness / ), dToR(circle.angleStart), dToR(circle.angleEnd), true);

         ctx.lineWidth = ;

         var gradient2 = ctx.createLinearGradient(, -circle.radius, , circle.radius);

         gradient2.addColorStop(, 'hsla(' + circle.hue + ', 100%, 50%, 0)');

         gradient2.addColorStop(., 'hsla(' + circle.hue + ', 100%, 100%, .7)');

         gradient2.addColorStop(, 'hsla(' + circle.hue + ', 100%, 50%, 0)');

         ctx.strokeStyle = gradient2;

         ctx.stroke();

         ctx.restore();

     },

     //弧线顶点发亮

     renderCircleFlare = function () {

         ctx.save();

         ctx.translate(circle.x, circle.y);

         ctx.rotate(dToR(circle.rotation + ));

         ctx.scale(, );

         ctx.beginPath();

         ctx.arc(, circle.radius, , , Math.PI * , false);

         ctx.closePath();

         var gradient3 = ctx.createRadialGradient(, circle.radius, , , circle.radius, );

         gradient3.addColorStop(, 'hsla(330, 50%, 50%, .35)');

         gradient3.addColorStop(, 'hsla(330, 50%, 50%, 0)');

         ctx.fillStyle = gradient3;

         ctx.fill();

         ctx.restore();

     },

     //发亮延伸

     renderCircleFlare2 = function () {

         ctx.save();

         ctx.translate(circle.x, circle.y);

         ctx.rotate(dToR(circle.rotation + ));

         ctx.scale(1.5, );

         ctx.beginPath();

         ctx.arc(, circle.radius, , , Math.PI * , false);

         ctx.closePath();

         var gradient4 = ctx.createRadialGradient(, circle.radius, , , circle.radius, );

         gradient4.addColorStop(, 'hsla(30, 100%, 50%, .2)');

         gradient4.addColorStop(, 'hsla(30, 100%, 50%, 0)');

         ctx.fillStyle = gradient4;

         ctx.fill();

         ctx.restore();

     },

     //创建亮点

     createParticles = function () {

         if (particles.length < particleMax) {

             particles.push({

                 x: (circle.x + circle.radius * Math.cos(dToR(circle.rotation - ))) + (rand(, circle.thickness * ) - circle.thickness),

                 y: (circle.y + circle.radius * Math.sin(dToR(circle.rotation - ))) + (rand(, circle.thickness * ) - circle.thickness),

                 vx: (rand(, ) - ) / ,

                 vy: (rand(, ) - ) / ,

                 radius: rand(, ) / ,

                 alpha: rand(, ) /

             });

         }

     },

     //更新已有亮点的坐标用于动态更随展示

     //同时降低透明度，删除透明度过低（先创建的点调用该函数的次数最多，也就最容易变低）的亮点。

     updateParticles = function () {

         var i = particles.length;

         while (i--) {

             var p = particles[i];

             p.vx += (rand(, ) - ) / ;

             p.vy += (rand(, ) - ) / ;

             p.x += p.vx;

             p.y += p.vy;

             p.alpha -= .;

             if (p.alpha < .) {

                 particles.splice(i, )

             }

         }

     },

     renderParticles = function () {

         var i = particles.length;

         while (i--) {

             var p = particles[i];

             ctx.beginPath();

             ctx.fillRect(p.x, p.y, p.radius, p.radius);

             ctx.closePath();

             ctx.fillStyle = 'hsla(0, 0%, 100%, ' + p.alpha + ')';

         }

     },

     clear = function () {

         ctx.globalCompositeOperation = 'destination-out';

         ctx.fillStyle = 'rgba(0, 0, 0, .1)';

         ctx.fillRect(, , cw, ch);

         ctx.globalCompositeOperation = 'lighter';

     }

 loop = function () {

     clear();

     updateCircle();

     renderCircle();

     renderCircleBorder();

     renderCircleFlare();

     renderCircleFlare2();

     createParticles();

     updateParticles();

     renderParticles();

 }

 ctx.shadowBlur = circle.blur;

 ctx.shadowColor = 'hsla(' + circle.hue + ', 80%, 60%, 1)';

 ctx.lineCap = 'round';

 setInterval(loop, );

小结

本篇没有什么内容，只是一个简单应用。

其实在上篇状态的保存和恢复中那个示例就是一个简单动画了。

其实HTML5中动画也不算难，简单说就是画图+定时刷新，所以重点还是在HTML5 APIs的应用及与其他现有技术的交叉使用。