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. Goland的GC回收机制

    Goland的GC回收机制 GC触发的条件 阈值:默认内存扩大一倍,启动gc 定期:默认2min触发一次gc,src/runtime/proc.go:forcegcperiod 手动:runtime. ...

  2. WPF界面语言切换

    举例中英文切换: 一.静态切换(每次切换需要重启应用) 1. 新建一个WPF APP(.NET Framework)项目,StaticLanguageSelect 2. 右击项目名,添加New Ite ...

  3. matlab图形中添加文本框

    图形中添加文本框,自己目前了解到了两种方法:1.用legend函数就可以对图形标注,形成一个文本框: 2.就是用annotation('textbox',[0.2,0.2.0.1,0.3],'Line ...

  4. 大作业：开发一个精美的 Web 网站

    大作业:开发一个精美的 Web 网站 实验目的: 掌握一个完整精美网页开发的基本方法 实验要求: 1.开发一个 Web 站点,至少有 3 个以上的页面: 2.采用 CSS 和 HTML 文件分开方法: ...

  5. VBS文件无限循环解决办法

    VBS文件无限循环解决办法,也就相当于编程中的停止运行指令. 那么如何关掉VBS文件呢?当然关机后会自动关掉,还有另外一种方法就是,在"任务管理器"中找到进程"WScri ...

  6. 什么是CSRF跨站请求伪造？(from表单效验csrf-ajdax效验csrf-Ajax设置csrf-CBV装饰器验证csrf)

    目录 一:csrf跨站请求伪造 1.什么是CSRF? 2.CSRF攻击案例(钓鱼网站) 3.钓鱼网站 内部原理 4.CSRF原理(钓鱼网站内部本质) 5.从上图可以看出,要完成一次CSRF攻击,受害者 ...

  7. Spring Boot 中初始化资源的几种方式

    假设有这么一个需求,要求在项目启动过程中,完成线程池的初始化,加密证书加载等功能,你会怎么做?如果没想好答案,请接着往下看.今天介绍几种在Spring Boot中进行资源初始化的方式,帮助大家解决和回 ...

  8. java-快捷操作

    crtl+c crtl+v crtl+a crtl+x crtl+x剪切 crtl+z撤销 crtl+s保存 alt+f4关闭窗口 完全删除shift+delet widow+r运行程序 window ...

  9. 记录VMware安装VMware Tools过程及遇到的一些问题

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 本文以CentOS安装为例 为什么要安装VMware Tools ? 便于在Windows 下更好管理虚拟机 便于设置Windows和CentOS ...

  10. [第四届世安杯](web)writeup

    ctf入门级题目 <?php $flag = '*********'; if (isset ($_GET['password'])) { if (ereg ("^[a-zA-Z0-9] ...