玩别人玩剩下的：canvas大雪纷飞

printempw 发布于2019-08-21 17:51 / 1395人阅读

摘要：改变雪花的坐标，在短时间内重绘一次，然后不断重复此过程，为了照顾浏览器爸爸的感受，超出画布边界的时候把雪花清除掉。

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);

效果预览

完整代码

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

云服务器 GPU云服务器两个人语音玩的游戏最好玩的编程语言可以玩捕鱼的云主机能玩主机游戏的云游戏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90097.html

【算法日积月累】0-写在前面的话

摘要：现在发出来的版本，我重新使用了语言实现。其实我之前介绍的老师课程也大量参考和使用算法这本书上的思路和例题。看这本书主要是让我觉得算法可以以比较轻松的方式入门。剑指这本书主要用于准备算法面试，在网络上备受好评。我是一个半路出家的程序员，在我刚开始从事编码工作的头几年，我没有接触过算法和数据结构，觉得它们是只会在我找工作的时候用得到的知识。尽管有很多人跟我说过算法和数据结构无比重要，我也...

flybywind 2019-07-31 11:21 评论0 收藏0
程序员，职场上请远离这种人！

摘要：随着微信和的不断普及，现在微信和留言也已经成为了甩锅证据的一部分，经常邮件里面大量粘贴微信聊天截图，职场上的宫心斗不比电视剧里面的差。对有些职场人来讲，甩锅就是一种生存手段。 01.从大学打篮球说起上大学的时候喜欢打篮球，然后我又特别喜欢抢篮板，经常是跳起来的时候没...

khs1994 2021-09-02 15:21 评论0 收藏0
技术人攻略访谈四十|刘睿民：数据库战国时代，我不跟你们玩政治！

摘要：导语本期访谈对象刘睿民，柏睿数据科技。由于计程车司机接二连三游行抗议，法国政府已颁布法令禁用。技术人攻略为什么会从数据挖掘，转向数据库引擎研发后来发现，所谓的数据挖掘在中国，很容易走偏。 showImg(https://segmentfault.com/img/bVkGay); 文：Gracia (本文为原创内容，部分或全文转载均需经过作者授权，并保留完整的作者信息和技术人攻略介绍。...

ispring 2019-06-25 18:14 评论0 收藏0