怎么把 html做成雪花特效,CSS3 HTML5下雪特效 雪花飘飘

CSS3 HTML5下雪特效 雪花飘飘

$(document).ready(function () {

makeSnow("christmasSnow", "bg.jpg");

});

function makeSnow(canvasId, imagePath) {

var christmasSnow = new ChristmasSnow(canvasId, imagePath);

renderAndUpdate.christmasSnow = christmasSnow;

setInterval(renderAndUpdate, 15);

}

function renderAndUpdate() {

renderAndUpdate.christmasSnow.render();

renderAndUpdate.christmasSnow.update();

}

function ChristmasSnow(canvasId, imagePath) {

var snowElement = document.getElementById(canvasId);

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

this.width = snowElement.clientWidth;

this.heigth = snowElement.clientHeight;

this.image = initImage(imagePath);

this.snow = initSnow(this.width, this.heigth);

}

function initImage(imagePath) {

var image = new Image();

image.src = imagePath;

return image;

}

function initSnow(width, height) {

var minRasius = 3,

maxRadius = 10,

minSpeedY = 1,

maxSpeedY = 3,

speedX = 0.05,

minAlpha = 0.5,

maxAlpha = 1.0,

minMoveX = 4,

maxMoveX = 18;

var snowSettings = new SnowSettings(minRasius, maxRadius, width, height, minSpeedY, maxSpeedY, speedX, minAlpha, maxAlpha, minMoveX, maxMoveX);

var snow = [];

var snowNumber = 200;

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

snow[i] = new Snow(snowSettings);

}

return snow;

}

ChristmasSnow.prototype.render = function() {

this.canvasContext.drawImage(this.image, 0, 0);

for(var i = 0; i < this.snow.length; ++i) {

this.snow[i].render(this.canvasContext);

}

}

ChristmasSnow.prototype.update = function() {

for(var i = 0; i < this.snow.length; ++i) {

this.snow[i].update();

}

}

function SnowSettings(minRadius, maxRadius, maxX, maxY, minSpeedY, maxSpeedY, speedX, minAlpha, maxAlpha, minMoveX, maxMoveX) {

this.minRadius = minRadius;

this.maxRadius = maxRadius;

this.maxX = maxX;

this.maxY = maxY;

this.speedX = speedX;

this.minSpeedY = minSpeedY;

this.maxSpeedY = maxSpeedY;

this.minAlpha = minAlpha;

this.maxAlpha = maxAlpha;

this.minMoveX = minMoveX;

this.maxMoveX = maxMoveX;

}

function Snow(snowSettings) {

this.snowSettings = snowSettings;

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

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

this.y = Math.random() * snowSettings.maxY;

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

this.speedX = snowSettings.speedX;

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

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

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

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

}

Snow.prototype.render = function(canvasContext) {

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

canvasContext.beginPath();

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

canvasContext.closePath();

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;

}

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

}

function randomInRange(min, max) {

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

return random;

}

body{ margin:0; padding:0; background:#181c59; }

.main{ width:1210px; height:720px; margin:0 auto;}

您的浏览器不支持 HTML5 canvas标签，无法看到下雪效果.

用到的图片：

本文来源于网络：查看 >https://blog.csdn.net/boyit0/article/details/40682065