怎么把 html做成雪花特效,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
怎么把 html做成雪花特效,CSS3 HTML5下雪特效 雪花飘飘相关推荐
- CSS3 HTML5下雪特效 雪花飘飘
<!doctype html> <html lang="en"> <head> <meta charset=utf-8 /> < ...
- css3 html5动画特效
转载自:http://www.html5tricks.com/8-html5-pure-css3-animation.html 8个超震撼的HTML5和纯CSS3动画源码 150 人浏览 发表回复 H ...
- html烟花特效案例,HTML5前端特效库 css3 按钮粒子烟花特效源码
HTML5前端特效库 css3 按钮粒子烟花特效源码 效果图 各位长友大家上午好! 今天给大家带来的是 css3 按钮粒子烟花特效源码! 大家可以按照自己的意愿进行修改! 有想要文件版源码的可以 在我 ...
- html5录像特效,6个迷人而令人惊叹的HTML5动画特效
HTML5正在快速的进入WEB世界,它在给浏览器各种压力的同时,也带给了我们很多之前意想不到的网页效果,如果我们在网页上能适当的使用一些 HTML5元素,可能会给网站带来不一样的用户体验.但是,对于H ...
- cesium实现下雨下雪特效
页面效果 使用着色器实例特效 下雨特效着色器 // 下雨特效 rain () {removeStage();var e = new Cesium.PostProcessStage({name: &qu ...
- html5语音闹钟代码,HTML5+CSS3闹钟动画特效源码
效果图 各位朋友大家好,今天给大家带来的是 <HTML5+CSS3闹钟动画特效源码> 可以添加在网站里面作为一个炫酷的小装饰 代码过长需要文档版源码来我的前端群581549454,已上传到 ...
- 世界地图html效果,css3+html5世界地图区域划分高亮显示特效
css3+html5世界地图区域划分高亮显示特效 @media screen and (max-width: 320px) { #map_base svg { height: 100px; } } @ ...
- 前端 开关按钮样式_7款外观迷人的HTML5/CSS3 3D按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
- html语言文字闪烁,CSS3+HTML5特效6 - 闪烁的文字
先看效果 abcd 这个效果也比较简单,利用keyframes对文字的大小.透明度及颜色做循环显示. CSS @-webkit-keyframes flash { 0%{ opacity:; } 50 ...
最新文章
- 微博并发这么牛逼!看他架构如何设计的?
- sqlite3之基本操作(二)
- ZooKeeper快速搭建
- 实现 JavaScript 异步方法 Promise.all
- 编程杂谈—— 浮点数
- 飞跃平野(sdut1124)
- c++运动学正反解 ros_ROS系统MoveIt玩转双臂机器人系列(六)–D-H逆运动学求解程序(C++)...
- html回车完成修改,后续段落样式 WORD回车后格式自动改变
- Node.js Unix/Linux NVM
- 【小家Java】Future与FutureTask的区别与联系
- VirtualLab Fusion光学仿真软件使用笔记
- 如何在Ubuntu MATE 18.04中安装GNOME 3?
- android studio文件名颜色分别表示含义
- 如何清除Word文档中的格式
- 单细胞文献学习(part2)--stPlus: a reference-based method for the accurate enhancement of ST
- aks Unable to connect to the server: x509
- Word格式处理控件Aspose.Words for .NET水印处理教程——如何添加和删除水印
- postgresql 事务隔离级别 set transaction isolation level
- DHCP服务器是什么?
- utorrent 连接到用户_用utorrent进行BT下载时如何屏蔽吸血用户的连接