标签:url 不能 val out func head 屏幕 修改 oct
引用【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>
修改之后(顺便改了颜色)有了“视觉下落”的效果,但是达不到对每个“雪花”的精细控制。。。而且仅仅是视觉上。。没有真正的下落
标签:url 不能 val out func head 屏幕 修改 oct
原文地址:http://www.cnblogs.com/xkxf/p/6750292.html