canvas下雪效果(原创)

Html

Css

* {
	margin:0;
	padding:0
}
html,body {
	width:100%;
	height:100%;
	overflow:hidden;
	background-color:#222;
}
#canvas {
	position:absolute;
	top:0;
	left:0;
}

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var imgSnow = document.getElementById("imgSnow");
    var bgSnow = document.getElementById("bgSnow");
    var ctx = canvas.getContext('2d');

canvas.width = $("body").width();
    canvas.height = $("body").height();

var GetRandomNum = function(Min, Max) {
        var Range = Max - Min;
        var Rand = Math.random();
        return (Min + Math.round(Rand * Range));
    }

console.log(GetRandomNum(0, canvas.width))

var snowArray = {}; //雪花对象
    var snowIndex = 0; //标识符
    var setting = {
        num: 30, //数量
        snowSize: 20, //大小
        startX: Math.random() * canvas.width, //起始横坐标
        startY: 0, //起始纵坐标
        vy: 0.01
    }

function snow() {
        // 起始横坐标
        this.x = Math.random() * canvas.width;
        // 起始纵坐标
        this.y = setting.startY;
        this.size = setting.snowSize + Math.random() * 10 - 10;

//横坐标偏移量
        this.vx = Math.random() * 3 - 2; //偏移量
        //纵坐标偏移量
        this.vy = Math.random() * 10;

this.life = 0;
        this.maxLife = 100;
        this.id = snowIndex;
        //当前信息保存至对象snowArray
        snowArray[snowIndex] = this;

snowIndex++;
    }

snow.prototype.draw = function() {
        this.x += this.vx;
        this.y += this.vy;

this.vy += setting.vy;

this.life++;

//删除
        if (this.y > canvas.height * 0.9 - 20) {
            snowArray[this.id]
        } else if (this.life >= this.maxLife) {
            snowArray[this.id]
        }

ctx.drawImage(imgSnow, this.x, this.y, this.size, this.size)
    }

setInterval(function() {
        //背景
        // ctx.fillStyle = "#000";
        //    			ctx.fillRect(0,0,canvas.width, canvas.height);
        ctx.drawImage(bgSnow, 0, 0, canvas.width, canvas.height)
        //地面
        // ctx.fillStyle='#fff';
        // ctx.fillRect(0,canvas.height*0.7+20,canvas.width, 2)

//数
        for (var i = 0; i < setting.num; i++) {
            if (Math.random() > 0.97) {
                new snow();
            }
        }

for (var i in snowArray) {
            snowArray[i].draw();
        }

}, 100)
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas下雪效果(原创)

代码描述：canvas下雪效果，代码注释全

1

最新

发表评论全部评论

暂时没有评论！

机械师尼尔0

2018/6/13 11:59:27

学习了

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

caohoucheng

相关代码

canvas下雪效果(原创)

最新