zoukankan      html  css  js  c++  java
  • js实现雪花飘落效果的代码

    使用js实现雪花飘落的效果,用html5绘布加js写的雪花飘效果 。

    代码:

    <html>
    <head>
    <script>
    /**
    * js与html5实现的雪花飘落效果
    * edit:www.jbxue.com
    */
    
    function start(){
    
    var array=new Array();
    
    var canvas=document.getElementById("mycanvas");
    
    var context=canvas.getContext("2d");
    
    for(var i=0;i<50;i++){
    
    var Showsnow=new showsnow();
    
    array.push(Showsnow);
    
    }
    
    
    time=setInterval(function (){
    
    context.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<array.length;i++){
    
    
    array[i].move();
    array[i].draw(context);
    
    }
    
    },500);
    
    }
    function showsnow(){
    var y=parseInt(Math.random()*50)*10;
    
    var x=parseInt(Math.random()*80)*10;
    
    this.draw=function(context){
    
    
    context.font="50px Calibri";
    context.fillText("*",x,y);
    
    
    }
    this.move=function(){
    y+=20;
    
    if(y>600){
    y=0;
    }
    }
    }
    </script>
    </head>
    
    <body>
    <input type="button" value="start" onclick="start()" />
    <br/>
    <canvas id="mycanvas" height="600px" width="600px" style="border: 3px solid blue"></canvas>
    </body>
    </html>
  • 相关阅读:
    4-数组、指针与字符串1.3-this指针
    Linux命令----cp
    Linux命令----mv
    Linux命令----rm
    PHP7下的协程实现 转
    php生成器 yield 转
    python并发编程之多进程(实践篇) 转
    python 多进程
    线程创建 线程数
    多任务 执行
  • 原文地址:https://www.cnblogs.com/study100/p/3282802.html
Copyright © 2011-2022 走看看