HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 实例代码 查看内容

【canvas教程】前端如何呼风唤雨

2015-11-12 11:18| 发布者: html5cn| 查看: 3370| 评论: 0|来自: HTML5中国

摘要: 最近在做一个需求,需要有下雨下雪的动画特效, 故在这里做了一个drop组件,来展现这种canvas常见的下落物体的效果。对于前端来说,canvas即是天地,在canvas这个天地上,前端可以呼风唤雨,无所不能。 ...

创世纪第一章
首卷原文
起初我创造了canvas 。
我说,要有雨,就有了雨;
我说,要有雪,就有了雪。
而对于前端来说,canvas即是天地
在canvas这个天地上,前端可以呼风唤雨,无所不能。


------------------------------------华丽的分割线-------------------------------------------------


##文章起因
其实就是最近在做一个需求,需要有下雨下雪的动画特效, 故在这里做了一个drop的组件,来展现这种canvas常见的下落物体的效果。那么,=。= ,就让我们先看看效果吧。
[github地址] 之后贴出来哈。。。。


##效果展示
调用代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         #canvas{
  8.             width:100%;
  9.             height: 100%;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <canvas id="canvas"></canvas>
  15.     <script src="canvasDrop.js"></script>
  16.     <script>
  17.         canvasDrop.init({
  18.             type: "rain",  // drop类型,有rain or snow
  19.             speed : [0.4,2.5], //速度范围
  20.             size_range: [0.5,1.5],//大小半径范围
  21.             hasBounce: true, //是否有反弹效果or false,
  22.             wind_direction: -105 //角度
  23.             hasGravity: true //是否有重力考虑
  24.         });
  25.     </script>
  26. </body>
  27. </html>
复制代码


下雨 下雪

看起来效果还是不错的,相对于使用创建dom元素来制作多物体位移动画, 使用canvas会更加容易快捷,以及性能会更好


##源码讲解
好了,接下来讲解一下简单的实现原理 首先,先定义一些我们会用到的全局变量,如风向角度,几率,对象数据等


##定义全局变量


  1. //定义两个对象数据
  2. //分别是drops下落物体对象
  3. //和反弹物体bounces对象
  4. var drops = [], bounces = [];
  5. //这里设定重力加速度为0.2/一帧
  6. var gravity = 0.2;


  7. var speed_x_x, //横向加速度
  8.       speed_x_y, //纵向加速度
  9.       wind_anger;  //风向
  10. //画布的像素宽高
  11. var canvasWidth,
  12.     canvasHeight;
  13. //创建drop的几率
  14. var drop_chance;
  15. //配置对象
  16. var OPTS;
  17. //判断是否有requestAnimationFrame方法,如果有则使用,没有则大约一秒30帧
  18. window.requestAnimFrame =
  19.     window.requestAnimationFrame ||
  20.     window.webkitRequestAnimationFrame ||
  21.     window.mozRequestAnimationFrame ||
  22.     window.oRequestAnimationFrame ||
  23.     window.msRequestAnimationFrame ||
  24.     function(callback) {
  25.         window.setTimeout(callback, 1000 / 30);
  26.     };
复制代码

##定义核心对象
接下来我们需要定义几个重要的对象 该组织所需定义的对象也比较少,总共才三个 在整个drop组件中共定义了`三个核心对象,分别是如下:
Vector 速度对象,带有横向x,和纵向y的速度大小 单位为:V = 位移像素/帧
对于Vector对象的理解也十分简单粗暴,就是记录下落对象drop的速度/V


  1. var Vector = function(x, y) {
  2.     //私有属性  横向速度x ,纵向速度y
  3.     this.x = x || 0;
  4.     this.y = y || 0;
  5. };
  6. //公有方法- add : 速度改变函数,根据参数对速度进行增加
  7. //由于业务需求,考虑的都是下落加速的情况,故没有减速的,后期可拓展
  8. /*
  9. * @param v  object || string  
  10. */
  11. Vector.prototype.add = function(v) {
  12.     if (v.x != null && v.y != null) {
  13.         this.x += v.x;
  14.         this.y += v.y;
  15.     } else {
  16.         this.x += v;
  17.         this.y += v;
  18.     }
  19.     return this;
  20. };
  21. //公有方法- copy : 复制一个vector,来用作保存之前速度节点的记录
  22. Vector.prototype.copy = function() {
  23.     //返回一个同等速度属性的Vector实例
  24.     return new Vector(this.x, this.y);
  25. };
  26. Drop 下落物体对象, 即上面效果中的雨滴和雪, 在后面你也可自己拓展为陨石或者炮弹
  27. 对于Drop对象其基本定义如下
  28. //构造函数
  29. var Drop = function() {
  30.     /* .... */
  31. };
  32. //公有方法-update
  33. Drop.prototype.update = function() {
  34.     /* .... */
  35. };
  36. //公有方法-draw
  37. Drop.prototype.draw = function() {
  38.     /* .... */
  39. };
复制代码


看了上面的三个方法,是否都猜到他们的作用呢,接下来让我们了解这三个方法做了些什么


##构造函数
构造函数主要负责定义drop对象的初始信息,如速度,初始坐标,大小,加速度等

  1. //构造函数 Drop

  2. var Drop = function() {
  3.     //随机设置drop的初始坐标
  4.     //首先随机选择下落对象是从从哪一边
  5.     var randomEdge = Math.random()*2;
  6.     if(randomEdge > 1){
  7.         this.pos = new Vector(50 + Math.random() * canvas.width, -80);
  8.     }else{
  9.         this.pos = new Vector(canvas.width, Math.random() * canvas.height);
  10.     }

  11.     //设置下落元素的大小
  12.      //通过调用的OPTS函数的半径范围进行随机取值
  13.     this.radius = (OPTS.size_range[0] + Math.random() * OPTS.size_range[1]) *DPR;

  14.     //获得drop初始速度
  15.     //通过调用的OPTS函数的速度范围进行随机取值
  16.     this.speed = (OPTS.speed[0] + Math.random() * OPTS.speed[1]) *DPR;

  17.     this.prev = this.pos;
  18.     //将角度乘以 0.017453293 (2PI/360)即可转换为弧度。
  19.     var eachAnger =  0.017453293;
  20.     //获得风向的角度
  21.     wind_anger = OPTS.wind_direction * eachAnger;
  22.     //获得横向加速度
  23.     speed_x =  this.speed * Math.cos(wind_anger);
  24.     //获得纵向加速度
  25.     speed_y = - this.speed * Math.sin(wind_anger);

  26.     //绑定一个速度实例
  27.     this.vel = new Vector(wind_x, wind_y);

  28. };
  29. ####Drop对象的update方法
  30. update方法负责,每一帧drop实例的属性的改变 如位移的改变
  31. Drop.prototype.update = function() {

  32.       this.prev = this.pos.copy();
  33.     //如果是有重力的情况,则纵向速度进行增加
  34.       if (OPTS.hasGravity) {
  35.           this.vel.y += gravity;
  36.       }
  37.   //
  38.    this.pos.add(this.vel);
  39. };
复制代码

##Drop对象的draw方法
draw方法负责,每一帧drop实例的绘画

  1. Drop.prototype.draw = function() {

  2.   ctx.beginPath();
  3.   ctx.moveTo(this.pos.x, this.pos.y);
  4. //目前只分为两种情况,一种是rain  即贝塞尔曲线
  5.   if(OPTS.type =="rain"){
  6.        ctx.moveTo(this.prev.x, this.prev.y);
  7.        var ax = Math.abs(this.radius * Math.cos(wind_anger));
  8.        var ay = Math.abs(this.radius * Math.sin(wind_anger));
  9.        ctx.bezierCurveTo(this.pos.x + ax, this.pos.y + ay, this.prev.x + ax , this.prev.y + ay, this.pos.x, this.pos.y);
  10.        ctx.stroke();

  11.   //另一种是snow--即圆形     
  12.   }else{
  13.          ctx.moveTo(this.pos.x, this.pos.y);
  14.          ctx.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI*2);
  15.          ctx.fill();
  16.   }
  17. };
复制代码

bounce 下落落地反弹对象, 即上面雨水反弹的水滴, 你也可后期拓展为反弹的碎石片或者烟尘
定义的十分简单,这里就不做详细说明

  1. var Bounce = function(x, y) {

  2.   var dist = Math.random() * 7;
  3.   var angle = Math.PI + Math.random() * Math.PI;

  4.   this.pos = new Vector(x, y);
  5.   this.radius =  0.2+ Math.random()*0.8;
  6.   this.vel = new Vector(
  7.     Math.cos(angle) * dist,
  8.     Math.sin(angle) * dist
  9.     );
  10. };

  11. Bounce.prototype.update = function() {

  12.   this.vel.y += gravity;

  13.   this.vel.x *= 0.95;
  14.   this.vel.y *= 0.95;

  15.   this.pos.add(this.vel);
  16. };

  17. Bounce.prototype.draw = function() {

  18.   ctx.beginPath();
  19.   ctx.arc(this.pos.x, this.pos.y, this.radius*DPR, 0, Math.PI * 2);
  20.   ctx.fill();

  21. };
复制代码

##对外接口
##update
即相当于整个canvas动画的开始函数

  1. function update() {

  2.     var d = new Date;
  3.     //清理画图
  4.     ctx.clearRect(0, 0, canvas.width, canvas.height);

  5.     var i = drops.length;
  6.     while (i--) {

  7.         var drop = drops<i>;

  8.         drop.update();
  9.         //如果drop实例下降到底部,则需要在drops数组中清楚该实例对象
  10.         if (drop.pos.y >= canvas.height) {
  11.             //如果需要回弹,则在bouncess数组中加入bounce实例
  12.             if(OPTS.hasBounce){
  13.                 var n = Math.round(4 + Math.random() * 4);
  14.                 while (n--)
  15.                 bounces.push(new Bounce(drop.pos.x, canvas.height));
  16.             }
  17.            //如果drop实例下降到底部,则需要在drops数组中清楚该实例对象
  18.             drops.splice(i, 1);
  19.         }

  20.         drop.draw();
  21.     }
  22.     //如果需要回弹
  23.     if(OPTS.hasBounce){
  24.         var i = bounces.length;
  25.         while (i--) {
  26.             var bounce = bounces<i>;
  27.             bounce.update();
  28.             bounce.draw();
  29.             if (bounce.pos.y > canvas.height) bounces.splice(i, 1);
  30.         }
  31.     }
  32.     //每次产生的数量
  33.     if(drops.length < OPTS.maxNum){
  34.         if (Math.random() < drop_chance) {
  35.             var i = 0,
  36.                   len = OPTS.numLevel;
  37.             for(; i<len; i++){
  38.                 drops.push(new Drop());
  39.             }
  40.         }

  41.     }
  42.     //不断循环update
  43.     requestAnimFrame(update);
  44. }</i></i>
复制代码

##init
init接口,初始化整个canvas画布的一切基础属性 如获得屏幕的像素比,和设置画布的像素大小,和样式的设置

  1. function init(opts) {
  2.     OPTS = opts;

  3.     canvas = document.getElementById(opts.id);
  4.     ctx = canvas.getContext("2d");

  5.     ////兼容高清屏幕,canvas画布像素也要相应改变
  6.     DPR = window.devicePixelRatio;

  7.     //canvas画板像素大小, 需兼容高清屏幕,故画板canvas长宽应该乘于DPR
  8.     canvasWidth = canvas.clientWidth * DPR;
  9.     canvasHeight =canvas.clientHeight * DPR;

  10.     //设置画板宽高
  11.     canvas.width = canvasWidth;
  12.     canvas.height = canvasHeight;

  13.     drop_chance = 0.4;
  14.     //设置样式
  15.     setStyle();
  16. }

  17. function setStyle(){
  18.     if(OPTS.type =="rain"){
  19.         ctx.lineWidth = 1 * DPR;
  20.         ctx.strokeStyle = 'rgba(223,223,223,0.6)';
  21.         ctx.fillStyle = 'rgba(223,223,223,0.6)';

  22.     }else{
  23.         ctx.lineWidth = 2 * DPR;
  24.         ctx.strokeStyle = 'rgba(254,254,254,0.8)';
  25.         ctx.fillStyle = 'rgba(254,254,254,0.8)';
  26.     }
  27. }
复制代码


##结束语
好了,一个简单的drop组件已经完成了,当然其存在着许多地方不够完善,经过本次drop组件的编写,对于canvas的动画实现,我相信在H5的场景中拥有着许多可发掘的地方。


最后说下不足的地方和后期的工作哈:
0、该组件目前对外接口不够多,可调节的范围并不是很多,抽象不是很彻底
1、 setStyle 设置 基本样式
2、 Drop 和Bounce 对象的 update 和 draw 方法的自定义,让用户可以设立更多下落的 速度和大小改变的形式和样式效果
3、 应增加对动画的pause,加速和减速等操作的接口


来源:腾讯Web前端IMWeb社区
【作者:coverguo】

更多
3

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (3 人)

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-5-23 09:10

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部