【JavaScript】下大雪
引用【JavaScript】满天星的代码,稍作修改的结果:
function drawStars() {
for (i = 1; i < 100; ++i) {
ctx.fillText("*", Math.random()*1024, Math.random()*768);
}
}
setInterval("drawStars()", 100);
text被反复绘制,以至占满屏幕,避免这种情况需要在每次repaint之前清除屏幕。code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
canvas {
background-color: white;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="1024" height="768" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Verdana";
function clear() {
ctx.clearRect(0, 0, c.width, c.height);
}
function drawStars() {
for (i = 1; i < 300; ++i) {
ctx.fillText("*", Math.random()*1024, Math.random()*768);
}
setTimeout(clear, 90);
}
setInterval(drawStars, 100);
// setInterval不会因为包含有setTimeout而延迟执行,
// 而是严格的按照传入setInterval的参数时间调用drawStars
// 每个setTimeout间也是相互独立的,不会因为上一个setTimeout还在等待时间就无法调用。
// 这里的setInterval和setTimeout不能独立考虑。。。如果interval的时间比较短,那么同一时间会有多个setTimeout在等待执行。。。
// 这样setTimeout除了第一次是按照自己的参数时间调用函数外,其余都是按Interval的时间参数调用。。。
// 如果需要clearInteval;那么需要以var verb = setInterval(drawStars, 100);形式声明变量
// 然后在函数中调用clearInteval(verb)终止循环
</script>
</body> </html>
修改之后(顺便改了颜色)有了“视觉下落”的效果,但是达不到对每个“雪花”的精细控制。。。而且仅仅是视觉上。。没有真正的下落
参考:
code2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>snow2</title>
</head>
<body>
<script>
// 尝试一个雪花下落。
// var screenWidth = document.documentElement.clientWidth;
// var screenHeight = document.documentElement.clientHeight;
//
// var star = document.createElement("div");
// star.innerHTML = '*';
// star.style.fontSize = 100 + "px";
// document.body.appendChild(star);
//
// var X = Math.random()*screenWidth;
// var Y = Math.random()*screenHeight;
// star.style.position = "absolute";
// star.style.left = X + "px";
// star.style.top = Y + "px";
//
// function down() {
// Y++;
// if (Y > screenHeight) {
// Y = 0;
// }
// star.style.left = X + "px";
// star.style.top = Y + "px";
// }
//
// setInterval(down, 10);
// 创建100个Snowflake对象,设置初始位置--->new star(300, 400);
// Snowflakes.down();
var screenWidth = document.documentElement.clientWidth;
var screenHeight = document.documentElement.clientHeight; var snowflake = [];
var X = [];
var Y = []; var numberOfSnowflake = 0;
function createSnowflake() {
var sf = document.createElement("div");
sf.innerHTML = '*';
sf.style.fontSize = 100 + "px";
document.body.appendChild(sf); X[numberOfSnowflake] = Math.random()*screenWidth;
Y[numberOfSnowflake] = Math.random()*screenHeight;
sf.style.position = "absolute";
sf.style.left = X[numberOfSnowflake] + "px";
sf.style.top = Y[numberOfSnowflake] + "px"; snowflake.push(sf); numberOfSnowflake++;
} function repaint(i) {
snowflake[i].style.left = X[i] + "px";
snowflake[i].style.top = Y[i] + "px";
} function down(i) {
function miniDown() {
Y[i]++;
if (Y[i] > screenHeight) {
X[i] = Math.random()*screenWidth;
Y[i] = 0;
}
repaint(i);
}
setInterval(miniDown, 10);
} var i;
for (i = 0; i <= 100; ++i) {
createSnowflake();
down(numberOfSnowflake);
}
down(0);
</script>
</body>
</html>
【JavaScript】下大雪的更多相关文章
- 【转】JavaScript下对去重算法的优化
本人较懒,直接将链接附上: JavaScript下去重算法优化:http://www.linuxde.net/2013/02/12062.html
- PHP与JavaScript下的Cookie操作
下面的例子列出几种情形交互场景,列出JS和php交互的方法.总结下,以免日后再为cookie问题困扰. setcookie.php getcookie.php 总结: php用自身函数读取php 的c ...
- JavaScript下的进制转换
JavaScript下的进制转换 //十进制转其他进制 var num = 99; console.log('十进制: ', num); console.log('八进制:', (num).toStr ...
- javascript下获取guid或者UTC时间作为唯一值
javascript下,有时出于需要,可以利用guid或UTC时间作为当前页面中的唯一值. 什么场景需要弄这个唯一值? 比如说,用easyUI的treegrid,添加新节点.在treegrid里面 , ...
- JavaScript下的setTimeout(fn,0)意味着什么?
近期在研究异步编程的我对于setTimeout之类的东西异常敏感.在SegmentFault上看到了一个问题<关于SetTimeout时间设为0时>:提问者读了一篇文章,原文解释setTi ...
- Javascript下拉导航
1.右侧导航 tree.js function Toggle(e){ if(!document.getElementById) return; if(!e) var e = window.event; ...
- JavaScript下拉框去除重复内容
下拉框去除重复内容 <script type="text/javascript" src="http://www.joleye.com/libraries/java ...
- Javascript下IE与Firefox下的差异兼容写法总结
http://www.jb51.net/article/23923.htm 总结一部分IE和Firefox的javascript差异写法,对于像书写多浏览器兼容性更好的代码,可以参考下. ...
- JavaScript下的new操作符做了什么?
可以参考知乎的一篇文章:https://zhuanlan.zhihu.com/p/23987456 参考网上其他人的文章,new发生了以下操作 参考MDN:https://developer.mozi ...
随机推荐
- sql语句中3表删除和3表查询
好久没来咱们博客园了,主要近期在忙一些七七八八的杂事,包括打羽毛球比赛的准备和自己在学jqgrid的迷茫.先不扯这些没用的了,希望大家能记得小弟,小弟在此谢过大家了. 回归正题:(以下的sql是本人在 ...
- sublime 空格 tab
sublime强大的编辑能力非常值得推荐.在编辑python语言时,因为python用段落格式取代了常见语言中的括号,所以在写python时.会将空格和tab混淆,如此产生的错误非常是恼人. 如17, ...
- vue-cli 打包(npm run build) 出现 ERROR in xx..js from UglifyJs Unexpected token: punc (()
之前打包还没问题,这次就报错了,后来发现原来是少了 .babelrc 文件, 网上找了好多方法都不行,后来看了之前的项目,原来是少了 .babelrc 文件, 只要在根目录下建立这个文件, 文件内容 ...
- html input accept类型
在上传文件的时候,需要限制指定的文件类型. <input type="file" accept="image/*" /> accept表示可以上传文 ...
- [Linux 学习] Centos 图形和命令行界面切换
要想切换图形界面和命令行界面切换, 需修改一个文件... root 下, 到 /etc/inittab 修改 id:5:initdefault Linux系统有7个运行级别(runlevel): 运行 ...
- 使用c++为node.js扩展模块
官方文档 编写c++代码 // demo.cc #include <node.h> using v8::FunctionCallbackInfo; using v8::Isolate; u ...
- xcode 运行 lua版本崩溃 解决方案
问题描述:运行到LuaStack::init() 崩溃 原因: luajit不支持arm64 解决方案:编译luajit64位静态库 a.可以直接下载别人编译好的库,然后直接覆盖cocos2d\ext ...
- WebService之XFire和SOAP实例(基于JAVA)
开发环境:jdk1.6 + Tomcat7 + MyEclipse10 源码下载地址张贴在文章最后面:首先是使用WSDL协议实现:这里使用XFire XFire一个免费.开源的SOAP框架,它构建了P ...
- js对象转成用&拼接的请求参数(转)
var parseParam=function(param, key){ var paramStr=""; if(param instanceof String||param in ...
- docker,构建nginx反向代理tomcat
Nginx实现负载均衡是通过配置nginx.conf来实现的,nginx.conf的全部内容如下: user nginx; worker_processes 1; error_log /var/log ...