canvas下雪

最新推荐文章于 2022-11-17 15:17:55 发布

zaki_wang

最新推荐文章于 2022-11-17 15:17:55 发布

阅读量295

点赞数

分类专栏： h5 文章标签： canvas-下雪

本文链接：https://blog.csdn.net/zaki_wang/article/details/54575853

版权

h5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

canvas下雪效果

html代码

<body>
    <button id="start-snowFall">开始</button>
    <button id="stop-snowFall">停止</button>
    <button id="pause-snowFall">暂停</button>
    <button id="resume-snowFall">回复</button>
</body>

js代码

window.onload = function () {
            //绑定事件
            var snow = new snowFall({ maxFlake: 200 });
            var start = document.getElementById('start-snowFall'),
                stop = document.getElementById('stop-snowFall'),
                pause = document.getElementById('pause-snowFall'),
                resume = document.getElementById('resume-snowFall');
            //开始
            start.onclick = function () {
                snow.start();
            }
            //停止
            stop.onclick = function () {
                snow.stop();
            }
            //暂停
            pause.onclick = function () {
                snow.pause();
            }
            //回复
            resume.onclick = function () {
                snow.resume();
            }
        }
        //控制对象封装
        function snowFall(snow) {
            //可配置属性
            snow = snow || {};
            this.maxFlake = snow.maxFlake || 20; //最多骗术
            this.flakeSize = snow.flakeSize || 10;// 雪花形状
            this.fallSpeed = snow.fallSpeed || 2;//坠落速度
            this.status = 0; //0-初始化、1-开始下雪 、2--停止下雪 、3--暂停下雪、4--继续下雨
        }
        //兼容写法
        requestAnimationFrame = window.requestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            function (callback) { setTimeout(callback, 1000 / 60) };
        cancelAnimationFrame = window.cancelAnimationFrame ||
            window.mozCancelAnimationFrame ||
            window.webkitCancelAnimationFrame ||
            window.msCancelAnimationFrame ||
            window.oCancelAnimationFrame;

        //开始下雪
        snowFall.prototype.start = function () {
            if (this.status == 1 || this.status == 4)
                return false;
            this.status = 1;
            //创建画布
            snowCanvas.apply(this);
            //创建雪花形状
            createFlakes.apply(this);
            //画学
            drawSnow.apply(this);
        }
        //停止下雪
        snowFall.prototype.stop = function () {
            if (this.status == 2 || this.status == 0 || !this.canvas) {
                return false;
            }
            //定制动画循环
            this.pause();
            this.status = 2;
            //删除画布
            this.canvas.parentNode.removeChild(this.canvas);
            this.canvas = null;
        };
        //暂停下雪
        snowFall.prototype.pause = function () {
            if (this.status == 3) {
                return false;
            }
            this.status = 3;
            cancelAnimationFrame(this.loop);
        }
        //继续下雪
        snowFall.prototype.resume = function () {
            if (this.status == 3 && this.canvas) {
                this.status = 4;
                //动画的计时控制
                this.loop = requestAnimationFrame(function () {
                    drawSnow.apply(that);
                });
            }
        }
        //创建画布
        function snowCanvas() {
            //添加Dom节点
            var snowcanvas = document.createElement('canvas');
            snowcanvas.id = 'snowfall';
            snowcanvas.width = window.innerWidth;
            snowcanvas.height = window.innerHeight;
            snowcanvas.setAttribute('style', 'position:fixed;top:0;left:0;z-index:2999;pointer-events:none;');

            document.getElementsByTagName('body')[0].appendChild(snowcanvas);
            this.canvas = snowcanvas;
            this.ctx = snowcanvas.getContext('2d');
            //窗口大小改变处理
            window.onresize = function () {
                snowcanvas.width = window.innerWidth;
                snowcanvas.height = window.innerHeight;
            }
        }
        //创建雪花
        function createFlakes() {
            var maxFlake = this.maxFlake,
                flakes = this.flakes = [],
                canvas = this.canvas;
            for (var i = 0; i < maxFlake; i++) {
                flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed));
            }
        }
        //雪运动对象
        function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
            this.x = Math.floor(Math.random() * canvasWidth);   //x坐标
            this.y = Math.floor(Math.random() * canvasHeight);  //y坐标
            this.size = Math.random() * flakeSize + 2;          //形状
            this.masSize = flakeSize;                           //最大形状
            this.speed = Math.random() * 1 + fallSpeed;         //坠落速度
            this.fallSpeed = fallSpeed;                         //坠落速度
            this.velY = this.speed;                             //y方向速度
            this.velX = 0;                                      //x方向速度
            this.stepSize = Math.random() / 30;                 //步长 
            this.step = 0;                                      //步数
        }
        //重置当前雪花的位置
        flakeMove.prototype.update = function () {
            var x = this.x,
                y = this.y;
            //左右摆动（余弦）
            this.velX *= 0.98;
            if (this.velY <= this.speed) {
                this.velY = this.speed;
            }
            this.velX += Math.cos(this.step += 0.05) * this.stepSize;

            this.y += this.velY;
            this.x += this.velX;
            //飞出边界处理
            if (this.x >= canvas.width || this.x <= 0 || this.y >=canvas.height || this.y <= 0) {
                this.reset(canvas.width,canvas.height);
            }
        }
        //飞出边界--放置最顶端继续坠落
        flakeMove.prototype.reset = function (width, height) {
            this.x = Math.floor(Math.random() * width);
            this.y = 0;
            this.size = Math.random() * this.masSize + 2;
            this.speed = Math.random() * 1 + this.fallSpeed;
            this.velY = this.speed;
            this.velX = 0;
        }
        //渲染雪花--随机形状
        flakeMove.prototype.render = function (ctx) {
            var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
            snowFlake.addColorStop(0, 'rgba(255,255,255,0.9)');
            snowFlake.addColorStop(0.5, 'rgba(255,255,255,0.5)');
            snowFlake.addColorStop(1, 'rgba(255,255,255,0)');
            ctx.save();
            ctx.fillStyle = snowFlake;
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fill();
            ctx.restore();
        }
        //滑雪
        function drawSnow() {
            var maxFlake = this.maxFlake,
                flakes = this.flakes;
            ctx = this.ctx,
            canvas = this.canvas,
            that = this;
            //清空
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (var i = 0; i < maxFlake; i++) {
                flakes[i].update();
                flakes[i].render(ctx);
            }
            //一折一帧的画
            this.loop = requestAnimationFrame(function () {
                drawSnow.apply(that);
            });
        }