html5的雪花特效项目

context.moveTo(-disX, disY);
context.lineTo(disX, -disY);


context.stroke();
context.restore();
}

/* var snow = new Snow(100, 100, 1, 10, 10, 10, 10);
snow.render();

var snow1 = new Snow(200, 400, 2, 50, 10, 10, 10);
snow1.render(); */

var snowArr = [];
function init() {
var len = 100;

for (var i = 0; i < len; i++) {
var x = Math.random() * canvas.width; //0-canvas.width
var scale = Math.random() + 0.5; //0.5-1.5
var rotate = Math.random() * 60; //0-60
var speedX = Math.random() + 1; //1-2
var speedY = Math.random() + 5; //5-6
var speedR = Math.random() * 4 + 2; //2-6

(function (x, y, scale, rotate, speedX, speedY, speedR) {
setTimeout(function () {
var snow = new Snow(x, y, scale, rotate, speedX, speedY, speedR);
snow.render();

snowArr.push(snow);
}, Math.random() * 8000);
})(x, 0, scale, rotate, speedX, speedY, speedR)
}

snowing();
}

init();

function snowing() {
setInterval(function () {
context.clearRect(0, 0, canvas.width, canvas.height)
for (var i = 0; i < snowArr.length; i++) {
snowArr[i].x = (snowArr[i].x + snowArr[i].speedX) % canvas.width;
snowArr[i].y = (snowArr[i].y + snowArr[i].speedY) % canvas.height;
snowArr[i].rotate = (snowArr[i].rotate + snowArr[i].speedR) % 60;


snowArr[i].render();
}

/*
0 1 2 3 4 5 6 % 4 = 0 1 2 3 0 1 2
*/
}, 30);
}
</script>
</body>

</html>