- 使用HTML5 Canvas实现的雪花飞舞特效，在圣诞背景的映衬下，一幅好美的风景。同时结合了jquery ui库，这里就直接引用了jquery官方的文件，如果有意要用本效果的，可下载到本地。测试请注意，要使用支持HTML5/CSS3 Canvas的浏览器才可看到效果。
-
<!doctype html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>CSS3 HTML5下雪特效 雪花飘飘</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
makeSnow("christmasSnow", "http://www.codefans.net/jscss/demoimg/201312/Christmas.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;
}
</script>
</head>
<body>
<canvas id="christmasSnow" width="1000px" height="630px">
您的浏览器不支持 HTML5 canvas标签，无法看到下雪效果.
</canvas>
</body>
</html>
标签：网站源码
下一篇：多种CSS3纹理背景效果