canvas 让你呼风唤雨,下雨下雪效果

前端如何呼风唤雨

Canvas 等于什么?

= html5 =js = 取代flash =  你可以即见即所得向别人装逼!没错 进入 canvas 的权力游戏吧!

起初我创造了canvas 。

我说,要有雨,就有了雨;

我说,要有雪,就有了雪。

而对于前端来说,canvas即是天地

在canvas这个天地上,前端可以呼风唤雨,无所不能。

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

文章起因

其实就是最近在做一个需求,需要有下雨下雪的动画特效, 故在这里做了一个drop的组件,来展现这种canvas常见的下落物体的效果。那么,=。= ,就让我们先看看效果吧。

[github地址] 之后贴出来哈。。。。

效果展示

调用代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #canvas{
            width:100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="canvasDrop.js"></script>
    <script>
        canvasDrop.init({
            type: "rain",  // drop类型,有rain or snow
            speed : [0.4,2.5], //速度范围
            size_range: [0.5,1.5],//大小半径范围
            hasBounce: true, //是否有反弹效果or false,
            wind_direction: -105 //角度
            hasGravity: true //是否有重力考虑
        });
    </script>
</body>
</html>

下雨 下雪

 

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

源码讲解

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

定义全局变量


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

var speed_x_x, //横向加速度
      speed_x_y, //纵向加速度
      wind_anger;  //风向
//画布的像素宽高
var canvasWidth,
    canvasHeight;
//创建drop的几率
var drop_chance;
//配置对象
var OPTS;
//判断是否有requestAnimationFrame方法,如果有则使用,没有则大约一秒30帧
window.requestAnimFrame =
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 30);
    };

定义核心对象

接下来我们需要定义几个重要的对象 该组织所需定义的对象也比较少,总共才三个 在整个drop组件中共定义了`三个核心对象,分别是如下:

  • Vector 速度对象,带有横向x,和纵向y的速度大小 单位为:V = 位移像素/帧

对于Vector对象的理解也十分简单粗暴,就是记录下落对象drop的速度/V


var Vector = function(x, y) {
    //私有属性  横向速度x ,纵向速度y
    this.x = x || 0;
    this.y = y || 0;
};
//公有方法- add : 速度改变函数,根据参数对速度进行增加
//由于业务需求,考虑的都是下落加速的情况,故没有减速的,后期可拓展
/*
* @param v  object || string
*/
Vector.prototype.add = function(v) {
    if (v.x != null && v.y != null) {
        this.x += v.x;
        this.y += v.y;
    } else {
        this.x += v;
        this.y += v;
    }
    return this;
};
//公有方法- copy : 复制一个vector,来用作保存之前速度节点的记录
Vector.prototype.copy = function() {
    //返回一个同等速度属性的Vector实例
    return new Vector(this.x, this.y);
};
  • Drop 下落物体对象, 即上面效果中的雨滴和雪, 在后面你也可自己拓展为陨石或者炮弹

对于Drop对象其基本定义如下

//构造函数
var Drop = function() {
    /* .... */
};
//公有方法-update
Drop.prototype.update = function() {
    /* .... */
};
//公有方法-draw
Drop.prototype.draw = function() {
    /* .... */
};

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

构造函数

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

//构造函数 Drop

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

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

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

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

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

};

Drop对象的update方法

update方法负责,每一帧drop实例的属性的改变 如位移的改变

Drop.prototype.update = function() {

      this.prev = this.pos.copy();
    //如果是有重力的情况,则纵向速度进行增加
      if (OPTS.hasGravity) {
          this.vel.y += gravity;
      }
  //
   this.pos.add(this.vel);
};

Drop对象的draw方法

draw方法负责,每一帧drop实例的绘画

Drop.prototype.draw = function() {

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

  //另一种是snow--即圆形
  }else{
         ctx.moveTo(this.pos.x, this.pos.y);
         ctx.arc(this.pos.x, this.pos.y, this.radius, 0, Math.PI*2);
         ctx.fill();
  }
};
  • bounce 下落落地反弹对象, 即上面雨水反弹的水滴, 你也可后期拓展为反弹的碎石片或者烟尘

定义的十分简单,这里就不做详细说明

var Bounce = function(x, y) {

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

  this.pos = new Vector(x, y);
  this.radius =  0.2+ Math.random()*0.8;
  this.vel = new Vector(
    Math.cos(angle) * dist,
    Math.sin(angle) * dist
    );
};

Bounce.prototype.update = function() {

  this.vel.y += gravity;

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

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

Bounce.prototype.draw = function() {

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

};

对外接口

update

即相当于整个canvas动画的开始函数

function update() {

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

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

        var drop = drops[i];

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

        drop.draw();
    }
    //如果需要回弹
    if(OPTS.hasBounce){
        var i = bounces.length;
        while (i--) {
            var bounce = bounces[i];
            bounce.update();
            bounce.draw();
            if (bounce.pos.y > canvas.height) bounces.splice(i, 1);
        }
    }
    //每次产生的数量
    if(drops.length < OPTS.maxNum){
        if (Math.random() < drop_chance) {
            var i = 0,
                  len = OPTS.numLevel;
            for(; i<len; i++){
                drops.push(new Drop());
            }
        }

    }
    //不断循环update
    requestAnimFrame(update);
}

init

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

function init(opts) {
    OPTS = opts;

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

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

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

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

    drop_chance = 0.4;
    //设置样式
    setStyle();
}

function setStyle(){
    if(OPTS.type =="rain"){
        ctx.lineWidth = 1 * DPR;
        ctx.strokeStyle = ‘rgba(223,223,223,0.6)‘;
        ctx.fillStyle = ‘rgba(223,223,223,0.6)‘;

    }else{
        ctx.lineWidth = 2 * DPR;
        ctx.strokeStyle = ‘rgba(254,254,254,0.8)‘;
        ctx.fillStyle = ‘rgba(254,254,254,0.8)‘;
    }
}

结束语

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

最后说下不足的地方和后期的工作哈:

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

如转载,敬请注明地址。

JS前端实用开发QQ群 :147250970  欢迎加入~!

时间: 2024-10-05 05:03:40

canvas 让你呼风唤雨,下雨下雪效果的相关文章

强大的CSS:模拟下雪效果动画制作教程

下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言 由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非css3和canvas(还有gif),对比下css3和canvas的优缺点: 动画自由度:canvas胜: 复杂度:canvas胜: 兼容性:canvas胜: 性能:css3胜(requestAnimationFrame和硬件加速). 由于对于性能有一定的要求,canvas对比css3会有更多的计算

CSS:模拟下雪效果动画制作教程

下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言 由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非css3和canvas(还有gif),对比下css3和canvas的优缺点: 动画自由度:canvas胜: 复杂度:canvas胜: 兼容性:canvas胜: 性能:css3胜(requestAnimationFrame和硬件加速). 由于对于性能有一定的要求,canvas对比css3会有更多的计算

使用Canvas对象实现“刮刮乐”效果

在淘宝.京东等电商举办活动的时候,经常可以看到在移动客户端推出的各种刮奖活动,而这种活动也受到了很多人的喜爱.从客户端的体验来说,这种效果应该是通过网页来实现的,那么,我们使用Android的自带控件能不能实现这种刮刮乐的效果呢?当然可以,本篇文章将介绍使用Canvas这个对象,如何实现"刮刮乐"的效果. 先看效果图 下面我们看一下如何使用代码实现 布局文件 <FrameLayout xmlns:android="http://schemas.android.com/a

关情纸尾-----Quartz2D定时器CADisplayLink下雪效果

定时器CADisplayLink下雪效果 1.定时器雪花整体思路: 先在控制器View面绘制一个雪花. 在View加载完毕后,添加一个定时器. 在定时器方法当中调用得绘方法. 在绘图方法当不段的去修改雪花的Y值. 当雪花的Y值超过屏幕的高度时,让雪花的Y值重新设为0.从最顶部开始. 2.添加定时器实现方案 第一种采用NSTime 第二种采用CADisplayLink 最终采用CADisplayLink方案. 2.1为什么采用CADisplayLink方案不用NSTime? 首先要了解setNee

HTML5 Canvas 实现的9个 Loading 效果

Sonic.js 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是 Sonic.js 还提供了基于现成的例子的创建工具,可以帮助你实现更多自定义的(Loading)加载动画效果. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型

再次推荐一款逼真的HTML5下雪效果

再次推荐一款逼真的下雪效果 效果图: 效果描述:之前推荐过一款下雪的jQuery插件之前的那款下降速度比较缓慢,今天推荐的这个下降速度比较快,大雪哇 使用方法:1.将index.html中的样式复制到你的样式表中2.将body中的代码部分拷贝到你需要的地方(注意保持图片.js文件路径的正确性) 查看效果:http://hovertree.com/texiao/jquery/36/ 下载地址 效果二 效果3 更多特效:http://www.cnblogs.com/roucheng/p/texiao

Particles.js基于Canvas画布创建粒子原子颗粒效果

文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫酷,能和鼠标互动吸附或者是躲避鼠标指针. 使用方法 1.该粒子动画库插件使用方法非常简单,首先要在页面中引入particles.js文件. <script src="js/particles.js"></script> 2.在页面中使用一个div来作为放置粒子的容器

桌面下雪效果

一个简单的下雪效果 MainWindow: 1.主界面通过DispatcherTimer给Grid生成雪花 2.雪花飘落后再讲雪花从Grid容器中移除 public partial class MainWindow { public MainWindow() { InitializeComponent(); Closing += (s, e) => ViewModelLocator.Cleanup(); Loaded += MainWindow_Loaded; } private void Ma

基于HTML5 canvas的jQuery刮刮卡效果

ScratchIt是一款基于HTML5 canvas的jQuery刮刮卡效果插件.这个刮刮卡效果使用两张图片和canvas来制作,可以使用鼠标擦除上面的图片,将下面的图片显露出来,模拟现实的刮刮卡效果. 效果演示:http://www.htmleaf.com/Demo/201506071985.html 下载地址:http://www.htmleaf.com/html5/html5-canvas/201506071984.html