|
板凳

楼主 |
发表于 2016-4-3 13:05:35
|
只看该作者
- <!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>
复制代码
|
|