码迷,mamicode.com
首页 > 其他好文 > 详细

。。。

时间:2017-04-23 01:20:24      阅读:211      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!