CSS3 HTML5下雪特效 雪花飘飘
来源:互联网 发布:cache数据库 m语言 编辑:程序博客网 时间:2024/04/28 20:39
<!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", "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;}</script><style type="text/css">body{ margin:0; padding:0; background:#181c59; }.main{ width:1210px; height:720px; margin:0 auto;}</style></head><body><div class="main"> <canvas id="christmasSnow" width="1210px" height="720px"> 您的浏览器不支持 HTML5 canvas标签,无法看到下雪效果. </canvas> </div></body></html>
用到的图片:
0 0
- CSS3 HTML5下雪特效 雪花飘飘
- js雪花特效_跟随页面滚动的下雪特效
- Html5 圣诞节动态下雪页面雪花飘落代码
- HTML5/CSS3特效
- css3 html5动画特效
- 下雪特效
- 下雪特效
- 下雪特效
- 下雪特效
- 下雪特效
- 下雪特效
- 下雪特效
- 下雪特效
- 下雪特效
- 下雪特效
- 下雪特效
- 下雪特效
- 下雪特效
- PHP类库
- List的方法和属性
- 新的起点
- C. MUH and House of Cards(数论规律题)
- 邻接表的数组实现
- CSS3 HTML5下雪特效 雪花飘飘
- mysql将查询结果中字段合并为字符串group_concat函数
- 我的大学
- 动画效果的三种方法代码段
- ROS 下如何连接多台kinect
- 微信公众平台如何选择服务号还是订阅号
- ORACLE 查看CPU使用率最高的语句及一些性能查询语句
- UVa 1225 数数字
- Git详解之一:Git起步