雪花飘落代码java_JS实现的雪花飘落特效示例
本文实例讲述了JS实现的雪花飘落特效。分享给大家供大家参考,具体如下:
首先我们要创建一个HTML文件,将其命名为index.html
Canvas - 雪花特效
*{
margin:0px;
padding:0px;
}
.myCanvas{
float:left;
background:rgba(0,0,0,0);
}
在上面的代码中,我们创建了一个canvas画布,并且设置他为浮动,背景色无(如果这里不设置浮动,那么等下获取整个屏幕的大小赋给他的时候是会产生边距的)
接下来的JavaScript代码
//获取屏幕最大长宽
var maxWidth = document.documentElement.clientWidth;
var maxHeight = document.documentElement.clientHeight;
//获取canvas画布
var canvasObj = document.getElementById('myCanvas');
//将屏幕的长宽赋给画布
canvasObj.width = maxWidth;
canvasObj.height = maxHeight;
//创建雪花图形(白色的圆形)
var cxt = canvasObj.getContext('2d');
//设置雪花的个数
var snowCount = 1000;
var objArray = [];
for(var index = 0;index < snowCount; index++){
objArray.push({
//随机x轴位置
x : Math.random()*maxWidth,
//随机y轴位置
y : Math.random()*maxHeight,
//随机半径大小
r : Math.random()*4+1,
//画圆
drow : function() {
cxt.beginPath();
//填充色
cxt.fillstyle = "#fff";
//填充
cxt.fill();
//圆的属性
cxt.arc(this.x,this.y,this.r,0,2*Math.PI);
//输出圆
cxt.stroke();
}
});
}
function drawSnow() {
cxt.clearRect(0,0,maxWidth,maxHeight)
//清除0x轴,0y轴,最大屏幕x轴,最大屏幕y轴的圆形
for(var index = 0; index
//把每个圆都画出来
objArray[index].drow();
}
downLoadSnow()
//调用雪花移动效果
}
function downLoadSnow() {
for(var index = 0;index
if(objArray[index].x > maxWidth) {
objArray[index].x = 0;
//当移动的位置大于最大屏幕宽度时返回到0
} else {
objArray[index].x +=5;
//否则一直加下去
}
if(objArray[index].y > maxHeight) {
objArray[index].y = 0;
//当移动的位置大于最大屏幕高度时返回0
} else {
objArray[index].y +=5;
//否则一直加下去
}
}
}
setInterval("drawSnow()",30);
//调用计时器
到此雪花落下的结果就已经实现了
这里使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.jb51.net/code/WebCodeRun测试上述代码,可得如下运行效果:
希望本文所述对大家JavaScript程序设计有所帮助。
雪花飘落代码java_JS实现的雪花飘落特效示例相关推荐
- 唯美雪景雪花飘落代码,附效果演示
唯美雪景雪花飘落代码, 效果演示; 包括一个index.html代码+两个js代码+图片文件夹 简单的来说不是很难,主要就是以理解为主,修改index里面的文字内容,以及图片的替换,js 的代码不需要 ...
- 个人网站html5雪花飘落代码JS特效下载
如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在 ...
- 5种Python雪花飘落代码(建议收藏)
前言 本文章向大家介绍用 Python 实现雪花飘落效果,运行以下代码,你将会看到一个美丽的雪花效果.你可以根据自己的需求,调整代码中的参数值以及其他细节. 第一种 普通雪花代码: import tu ...
- php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果,看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果 看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
- 手机html5雪花飘落,如何使用HTML5canvas实现雪花飘落
这篇文章主要为大家详细介绍了HTML5 canvas实现雪花飘落特效,效果实现引人入胜,很逼真的动画效果,感兴趣的小伙伴们可以参考一下 看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相 ...
- java飘落的雪花_[Java教程]树叶飘落、雪花飘落等同时多个图片飘落
[Java教程]树叶飘落.雪花飘落等同时多个图片飘落 0 2018-07-10 04:00:54 snowfall.jquery.js是树叶等图片飘落的插件,但是只支持一种图片的飘落效果,但是我遇到的 ...
- 生成主键ID,唯一键id,分布式ID生成器雪花算法代码实现
工具类: package com.ihrm.common.utils;import java.lang.management.ManagementFactory; import java.net.I ...
- 收藏转载樱花飘落代码
樱花飘落代码非常漂亮.无需添加图片 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> < ...
- android桌面雪花效果代码,Android营造雪花和雨滴浪漫效果
本文在实现雪花效果的基础上,根据漫天飞舞雪花,实现下雨天场景的效果,使用eclipse android 版本,具体内容如下 雪花效果图: 具体代码: 1.漫天飞舞的雪花主要代码 SnowView pa ...
最新文章
- PowerDesigner里怎样查找特定的表
- 【漏洞复现】WordPress插件Quizlord 2.0 XSS漏洞复现与分析
- 如何用java语言调用tensorflow训练好的模型
- 腾讯视频怎么开启禁止界面硬件加速
- IE6 CSS bug: position:relative元素被overflow:auto/scroll元素包含
- listdir在python3_Python3 os.listdir() 方法
- Python:完整的语法规范
- Bilibili缓存视频在电脑端直接打开方式
- 爬虫抓图2022年全网最新方法,这一次终于是4k高清美图
- 802.11ac中的Beamforming技术(4)
- 如何从有故障的 SD 卡恢复文件
- Python 解析log日志
- 基于视觉导航机器人的快递分拣系统(开放源码附带论文和github仓库)
- APP性能优化--启动优化
- 高级网络管理员必学知识
- 日拱一卒——160个crackme之#5
- Unity3d跨场景背景音乐和场景切换加载界面的设置!
- 10家企业上榜!2021“中国制造隐形冠军”完整榜单揭晓
- Spread for WPF-Silverlight 新功能使用指南
- 机械键盘caps键和ctrl键颠倒,解决办法