画布颗粒的特殊效果分析

关于的使用

requestAnimationFrame（）函数.

效果如下:

Js代码

#3:4:3:c:a:e:4:7:6:2:9:b:a:8:d:e:1:6:a:a:8:6canvas粒子特效:8:4:c:3:d:e:3:d:4:6#

;
(function (undefined) {
    "use strict";
    var _global;
    /*
     * @var star_r：star半径系数，系数越大，半径越大
     * @var star_alpha：生成star的透明度，star_alpha越大，透明度越低
     * @var initStarsPopulation：初始化stars的个数
     * @var move_distance：star位移的距离，数值越大，位移越大
     * @var dot_r : dot半径系数，系数越大，半径越大
     * @var dot_speeds : dots运动的速度
     * @var dot_alpha : dots的透明度
     * @var aReduction：dot消失条件，透明度小于aReduction时消失
     * @var dotsMinDist：dot最小距离
     * @var maxDistFromCursor：dot最大距离
     *
     * */
    var config = {
        star_r: 3,
        star_alpha: 5,
        initStarsPopulation: 150,
        move_distance: 0.25,
        dot_r: 5,
        dot_speeds: 0.5,
        dot_alpha: 0.5,
        dot_aReduction: 0.01,
        dotsMinDist: 5,
        maxDistFromCursor: 50,
    };
    var stars = [],
        canvas = document.querySelector('canvas'),
        ctx = canvas.getContext('2d'),
        WIDTH,
        HEIGHT;
    function CanvasStar(conf) {
        this.init(conf);
    }
//初始化函数        实例化CanvasStar      然后运行init()
    var initConfig = function (conf) {
        if (conf instanceof Object)
            for (var item in conf) {
                config[item] = conf[item];
            }
    };
    CanvasStar.prototype.init = function (conf) {
        initConfig(conf); //初始化设置

        ctx.strokeStyle = "black";
        ctx.shadowColor = "black";
        for (var i = 0; i < config.initStarsPopulation; i++) {
            stars[i] = new CircleStar(i, Math.floor(Math.random() * WIDTH), Math.floor(Math.random() * HEIGHT), true);
            //stars[i].draw();
        }
        ctx.shadowBlur = 0;
        animate();
    };
    function CircleStar(id, x, y, useCache) {
        this.id = id;
        this.x = x;
        this.y = y;
        this.useCacha = useCache;
        this.cacheCanvas = document.createElement("canvas");
        this.cacheCtx = this.cacheCanvas.getContext("2d");
        this.r = Math.floor(Math.random() * config.star_r) + 1;
        this.cacheCtx.width = 6 * this.r;
        this.cacheCtx.height = 6 * this.r;
        var alpha = (Math.floor(Math.random() * 10) + 1) / config.star_alpha;
        this.color = "rgba(0,0,0," + alpha + ")";
        if (useCache) {
            this.cache();
        }
    }
    CircleStar.prototype = {
        draw: function () {
            if (!this.useCacha) {
                ctx.save();
                ctx.fillStyle = this.color;
                ctx.shadowBlur = this.r * 2;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
                ctx.closePath();
                ctx.fill();
                ctx.restore();
            } else {
                ctx.drawImage(this.cacheCanvas, this.x - this.r, this.y - this.r);
            }
        },
        cache: function () {
            this.cacheCtx.save();
            this.cacheCtx.fillStyle = this.color;
            this.cacheCtx.shadowColor = "white";
            this.cacheCtx.shadowBlur = this.r * 2;
            this.cacheCtx.beginPath();
            this.cacheCtx.arc(this.r * 3, this.r * 3, this.r, 0, 2 * Math.PI);
            this.cacheCtx.closePath();
            this.cacheCtx.fill();
            this.cacheCtx.restore();
        },
        move: function () {
            this.y -= config.move_distance;
            if (this.y <= -10) {
                this.y += HEIGHT + 10;
            }
            this.draw();
        },
        die: function () {
            stars[this.id] = null;
            delete stars[this.id];
        }
    };
    // 完成重绘的过程
    function animate() {
        ctx.clearRect(0, 0, WIDTH, HEIGHT);
        for (var i in stars) {
            stars[i].move();
        }
        requestAnimationFrame(animate);
    }
    function degToRad(deg) {
        return deg * (Math.PI / 180);
    }
    function setCanvasSize() {
        WIDTH = document.documentElement.clientWidth;
        HEIGHT = document.documentElement.clientHeight;
        canvas.setAttribute("width", WIDTH);
        canvas.setAttribute("height", HEIGHT);
    }
    setCanvasSize();
    // 最后将插件对象暴露给全局对象
    _global = (function () {
        return this || (0, eval)('this');
    }());
    if (typeof module !== "undefined" && module.exports) {
        module.exports = CanvasStar;
    } else if (typeof define === "function" && define.amd) {
        define(function () {
            return CanvasStar;
        });
    } else {
        !('CanvasStar' in _global) && (_global.CanvasStar = CanvasStar);
    }
})();

查看代码

初始化:

#d:c:2:c:e:6:2:4:6:7:9:5:f:d:e:9:f:8:9:7canvas粒子特效:f:d:4:d:4:8:a:4:f:7:4:4#

发布于2018年1月13日19: 14认真阅读（...）评论（...）编辑

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-147476-1.html