canvas大雪纷飞

前言：正好业务触及到canvas，看完api顺手写个雪花效果，因为之前看到过很多次这个，主要看思路，想象力好的可以慢慢去创作属于自己的canvas效果

思路：

  • 利用画圆arc()和环形渐变色createRadialGradient()画一个雪花的模型（想要更好看的模型可以用图片代替）
    var grd = this.canvas.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);

    grd.addColorStop(0, "rgba(255,255,255,1)");

    grd.addColorStop(1, "rgba(255,255,255,0.2)");

    this.canvas.fillStyle = grd;

    this.canvas.arc(this.x, this.y, this.r, 0, 2 * Math.PI);

    this.canvas.fill();

效果图

  • 如何让canvas画布上的点移动

动画其实就是一帧一帧的画面的组合，在一定时间内把画面从第一帧切换到第二帧到第n帧这个过程就是动画
弄懂这个道理，让雪花动起来就很简单了，重绘。
改变雪花的x,y坐标，在短时间内重绘一次，然后不断重复此过程，为了照顾浏览器爸爸的感受，x,y超出画布边界的时候把雪花清除掉。

    setInterval(() => {

        arr[0].canvas.clearRect(0, 0, maxW, maxH);

        for(var i = 0; i < arr.length; i++) {

            if(arr[i].y >= maxH){

                //清除超出下边界的雪花

                continue;

            }

            arr[i].play();

        }

    }, 30);

    play: function() {

        this.x += this.speedX;

        this.y += this.speedY;

        if(this.x < this.r) {

            this.speedX = Math.abs(this.speedX);

        }

        if(this.y < this.r) {

            this.speedY = Math.abs(this.speedY);

        }

        this.canvas.beginPath();

        var grd = this.canvas.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);

        grd.addColorStop(0, "rgba(255,255,255,1)");

        grd.addColorStop(1, "rgba(255,255,255,0.2)");

        this.canvas.fillStyle = grd;

        this.canvas.arc(this.x, this.y, this.r, 0, 2 * Math.PI);

        this.canvas.fill();

    }
  • 最后一步就是创建一个个雪花实例去执行动画了
    var snow = function() {

        this.x = this.rand(maxW);

        this.y = 0;

        this.r = this.rand(10);

        this.speedX = this.getRanNum(-5, 5);

        this.speedY = this.getRanNum(10, 20);

        this.width = 0;

        this.height = 0;

        this.canvas = {};

        this.init();

    }

    var arr = [];

    setInterval(() => {

        for(let i = 0; i < 10; i++) {

            arr.push(new snow());

        }

    }, 30);

效果预览

完整代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            body {

                background-color: '#fff';

            }

            canvas {

                background-color: rgba(0, 0, 0, 1);

            }

        </style>

    </head>

    <body>

        <canvas id="canvas" width="1000px" height="500px"></canvas>

        <script type="text/javascript">

            var myCanvas = document.getElementById('canvas')

            var ctx = myCanvas.getContext('2d');

            var clientW = window.innerWidth;

            var clientH = window.innerHeight;

            myCanvas.width = clientW;

            myCanvas.height = clientH;

            var maxW = clientW;

            var maxH = clientH;

            //雪花实例构造函数

            var snow = function() {

                this.r = this.rand(10);

                this.x = this.rand(maxW);

                this.y = 0;

                this.speedX = this.getRanNum(-5, 5);

                this.speedY = this.getRanNum(10, 20);

                this.width = 0;

                this.height = 0;

                this.canvas = {};

                this.init();

            }

            snow.prototype = {

                //初始化

                init: function() {

                    var snow = document.getElementById('canvas');

                    this.canvas = snow.getContext('2d');

                    this.width = snow.width;

                    this.height = snow.height;

                },

                //获取0-num之间的随机数

                rand: function(num) {

                    return Math.floor(Math.random() * num + 1);

                },

                //获取n-m之间的随机数

                getRanNum: function (n, m) {

                    return Math.floor(Math.random() * (m - n) + n);

                },

                //雪花移动

                play: function() {

                    //改变坐标位置   连续重绘形成动画效果

                    this.x += this.speedX;

                    this.y += this.speedY;

                    this.canvas.beginPath();

                    //定义雪花UI  渐变色+圆

                    var snowColor = this.canvas.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);

                    snowColor.addColorStop(0, "rgba(255,255,255,1)");

                    snowColor.addColorStop(1, "rgba(255,255,255,0.2)");

                    this.canvas.fillStyle = snowColor;

                    this.canvas.arc(this.x, this.y, this.r, 0, 2 * Math.PI);

                    this.canvas.fill();

                }

            };

            var arr = [];

            //生成新雪花的速度  每30ms生成10个

            setInterval(() => {

                for(let i = 0; i < 10; i++) {

                    arr.push(new snow());

                }

            }, 30);

            //雪花重绘(即帧，多帧即移动动画) 30ms重绘一次

            setInterval(() => {

                arr[0].canvas.clearRect(0, 0, maxW, maxH);

                for(let i = 0; i < arr.length; i++) {

                    if(arr[i].y >= maxH){

                        //清除超出下边界的雪花

                        arr.splice(i,1);

                        continue;

                    }

                    arr[i].play();

                }

            }, 30);

        </script>

    </body>

</html>

最后，每几个canvas的方法组合一下做个小效果，慢慢的就可以做大型炫酷效果了，当然，炫酷效果离不开一些常用或生僻的数学知识，各类算法，方法，相关插件（我说的插件是用来计算一些东西或者图形之类的，不是用插件画canvas）作为铺垫
敲黑板，希望路过的大神能介绍一些canvas进阶需要学习的一些知识点，小弟不胜感激~

版权所有，转载请注明出处~

玩别人玩剩下的：canvas大雪纷飞的更多相关文章

  1. 为什么说程序员都应该玩一玩GitHub

    既熟悉又陌生的GitHub 关于GitHub,相信每一个程序员都再熟悉不过了.它为开发者提供Git仓库的托管服务,是全世界最大的代码集中地,被戏称为“全球最大同性交友网站”. 但是对于很大一部分程序员 ...

  2. 玩一玩nodejs--一个简单的在线实时填表应用

    学习nodejs三天,入了个门,感觉他和jsp.php还是存在较大的差别.本文首先复习这些天学的一些知识点,然后谈一下如何一步一步到做一个在线实时填表的小应用,进一步巩固一下这些个知识点.这里先简单介 ...

  3. 一起玩转玩转LiteOS组件：TinyFrame

    摘要:TinyFrame是一个简单的用于解析串口(如 UART.telnet.套接字等)通信数据帧的库. 本文分享自华为云社区<LiteOS组件尝鲜-玩转TinyFrame>,作者:Lio ...

  4. 玩一玩基于Token的 自定义身份认证+权限管理

    使用基于 Token 的身份验证方法,在服务端不需要存储用户的登录记录.大概的流程是这样的: 客户端使用用户名跟密码请求登录 服务端收到请求,去验证用户名与密码 验证成功后,服务端会签发一个 Toke ...

  5. 无语啊，sublime给我弄乱玩，玩坏了，而且安装插件也安装不了

    国内的什么插件地址都TMMD失效了,没办法,只能翻"强"到外面找了,而且找了很多也用不了,所以收藏一个为了预防以后不行有补救的方法: 百度的99%都不行,不是报这个错就是那个错,可 ...

  6. 想挑战AlphaGO吗？先和PostgreSQL玩一玩?? PostgreSQL与人工智能(AI)

    1月4日晚,随着古力认输,Master对人类顶尖高手的战绩停留在60胜0负1和,而令人尴尬的是这唯一一场和棋还是因为棋手掉线系统自动判和,并不是棋盘上的局势真的势均力敌了.包括聂卫平.柯洁.朴廷桓.井 ...

  7. js 玩一玩

    闲着没事学了学js,做了一个下页面玩玩. 下面是html代码: <!DOCTYPE html><html> <head> <meta charset=&quo ...

  8. .NET Core 玩一玩 Ocelot API网关

    .net 这几年国内确实不好过. 很多都选择转行.不过.net Core跨平台 开源之后 .社区的生态在慢慢建立.往好的趋势发展. 对于坚守在.NET战线的开发者来说 是个挺不错的消息.  特别是微软 ...

  9. 玩一玩MEAN

    参考的书如下: Manning.Getting.MEAN.with.Mongo.Express.Angular.and.Node. 开始再次了解.

随机推荐

  1. 报错:net::err_unknown_url_scheme的解决办法

    在项目中设置了api请求和web页面请求的地址,如下图: 控制台报错,如下图: 问题是:没有加入"http://"这个头,因此访问不到. 解决办法: 再次访问正常

  2. Python 并发编程（下）

    Python 并发编程(下) 课程目标:掌握多进程开发的相关知识点并初步认识协程. 今日概要: 多进程开发 进程之间数据共享 进程锁 进程池 协程 1. 多进程开发 进程是计算机中资源分配的最小单元: ...

  3. Django后台管理的使用

    Django后台管理的使用 参考文章:https://www.runoob.com/django/django-admin-manage-tool.html 1.编写好models 直接在admin. ...

  4. JZ-030-连续子数组的最大和

    连续子数组的最大和 题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和, 当向量全为正数的时候,问题很 ...

  5. tp5 （自写） 实现redis消息队列 + 排行榜

    1:小皮开启redis, 控制器按Ctrl 点击new Redis 进入 redis.php 进行封装 //向队列添加数据 // LPUSH key value1 [value2] //将一个或多个值 ...

  6. 源码安装Vim并配置YCM自动补全插件

    Compiling Vim from source is actually not that difficult. Here's what you should do: 1. Install all ...

  7. python 程序小练习

    print("Type integers,each followed by Enter; or just Enter to finish") total = 0 count = 0 ...

  8. python 绘图介绍

    1. python 绘图介绍 2. 函数 import numpy as np import matplotlib.pyplot as plt t = np.arange(0.0, 3.0, 0.01 ...

  9. 6月11日 python学习总结 框架理论

    Web框架本质及第一个Django实例   Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web ...

  10. python爬取网络中的QQ号码

    import urllib.request import ssl import re import os #博客地址:https://blog.csdn.net/qq_36374896 def wri ...