canvas制作雪花效果

/**

 * 雪花

 * canvas版

 */

$(function() {

    /**

     * 雪球

     * @param {[type]} elementName [description]

     */

    function Snowflake(elementName) {

        var snowElement = document.getElementById(elementName)

        var canvasContext = snowElement.getContext("2d");

        var width = config.clientWidth;

        var height = config.clientHeight;

        //canvas尺寸修正

        snowElement.width = width;

        snowElement.height = height;

        //构建雪球的数量

        var snowNumber = 50;

        //构建雪球对象

        var snowArrObjs = initSnow(snowNumber, width, height);

        var snowArrNum = snowArrObjs.length;

        /**

         * 绘制页面

         * @return {[type]} [description]

         */

        var render = function() {

            //清理之前的矩形数据

            canvasContext.clearRect(0, 0, width, height);

            for (var i = 0; i < snowArrNum; ++i) {

                snowArrObjs[i].render(canvasContext);

            }

        }

        /**

         * 更新雪花

         * @return {[type]} [description]

         */

        var update = function() {

            for (var i = 0; i < snowArrNum; ++i) {

                snowArrObjs[i].update();

            }

        }

        /**

         * 绘制与更新

         * @return {[type]} [description]

         */

        var renderAndUpdate = function() {

            render();

            update();

            requestAnimationFrame(renderAndUpdate);

        }

        renderAndUpdate();

    }

    function initSnow(snowNumber, width, height) {

        //雪球参数

        var options = {

            //雪球的半球距离

            minRadius: 3,

            maxRadius: 10,

            // 运动的范围区域

            maxX: width,

            maxY: height,

            //速率

            minSpeedY: 0.05,

            maxSpeedY: 2,

            speedX: 0.05,

            //滤镜

            minAlpha: 0.5,

            maxAlpha: 1.0,

            minMoveX: 4,

            maxMoveX: 18

        }

        var snowArr = [];

        for (var i = 0; i < snowNumber; ++i) {

            snowArr[i] = new Snow(options);

        }

        return snowArr;

    }

    /**

     * 雪球类

     */

    function Snow(snowSettings) {

        this.snowSettings = snowSettings;

        this.radius = randomInRange(snowSettings.minRadius, snowSettings.maxRadius);

        //初始的x位置

        this.initialX = Math.random() * snowSettings.maxX;

        this.y = -(Math.random() * 500);

        //运行的速率

        this.speedY = randomInRange(snowSettings.minSpeedY, snowSettings.maxSpeedY);

        this.speedX = snowSettings.speedX;

        //滤镜

        this.alpha = randomInRange(snowSettings.minAlpha, snowSettings.maxAlpha);

        //角度.默认是360

        this.angle = Math.random(Math.PI * 2);

        //运行的距离

        this.x = this.initialX + Math.sin(this.angle);

        //x移动距离

        this.moveX = randomInRange(snowSettings.minMoveX, snowSettings.maxMoveX);

    }

    /**

     * 绘制雪球

     * @param  {[type]} canvasContext [description]

     * @return {[type]}               [description]

     */

    Snow.prototype.render = function(canvasContext) {

        //清除路径

        //开始一个画布中的一条新路径（或者子路径的一个集合）

        canvasContext.beginPath();

        //用来填充路径的当前的颜色，白色的雪球

        canvasContext.fillStyle = "rgba(255, 255, 255, " + this.alpha + ")";

        //一个中心点和半径，为一个画布的当前子路径添加一条弧线

        //坐标，圆，沿着圆指定弧的开始点和结束点的一个角度

        //弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历

        canvasContext.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);

        //关闭子路径

        canvasContext.closePath();

        //fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径

        canvasContext.fill();

    }

    Snow.prototype.update = function() {

        this.y += this.speedY;

        if (this.y > this.snowSettings.maxY) {

            this.y -= this.snowSettings.maxY;

        }

        this.angle += this.speedX;

        if (this.angle > Math.PI * 2) {

            this.angle -= Math.PI * 2;

        }

        //?

    }

    /**

     * 随机处理

     * @param  {[type]} min [description]

     * @param  {[type]} max [description]

     * @return {[type]}     [description]

     */

    function randomInRange(min, max) {

        var random = Math.random() * (max - min) + min;

        return random;

    }

    Snowflake("snowflake")

})