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>
  • 相关阅读:
    HTML学习笔记Day16
    HTML学习笔记Day15
    HTML学习笔记Day14
    三角形
    三级菜单
    开关制作源代码
    HTML标签
    弹性盒模型
    怪异盒模型
    实验7:Problem F: STL——字典
  • 原文地址:https://www.cnblogs.com/study100/p/3282802.html
Copyright © 2011-2022 走看看