HTML5 CSS3下雪特效雪花飛舞

2024-09-05 12:19:01

字體：大中小

來源：轉載

供稿：網友

使用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", "/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紋理背景效果

下一篇：HTML5實現手機搖一搖更換背景色