html5漂亮的雪花 

代码来源于潭州免费java视频教程
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
    <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>雪花</title>
  <style type="text/css">
    *{margin:0;padding:0;}
    body{overflow:hidden;background:url("snow2.jpg")no-repeat;background-size:cover;}
  </style>
 </head>
 <body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
    //取得画板
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    //ctx.beginPath();
    //ctx.lineWidth=1;//线条粗细
    //ctx.strokeStyle="red";//线条颜色
    //ctx.arc(100,100,30,0,Math.PI*2);//ctx.arc(x,y,r,startangle,endangle);
    //ctx.stroke();
    var screen=window.screen;//取得窗口屏幕
    var w=screen.width;
    var h=screen.height;
    canvas.width=w;
    canvas.height=h;
    var numberofsnow=200;//雪球个数
    var snow=[];
    for(var i=0;i<numberofsnow;i++){
        snow.push({
            x:Math.random()*w,
            y:Math.random()*h,
            r:Math.random()*5
        })    
    }
    function draw(){
        ctx.shadowColor="#fff";//阴影颜色,白色让雪球发光
        ctx.shadowBlur=10;//阴影模糊级数，越高越模糊 
        ctx.clearRect(0,0,w,h);//清除画布
        ctx.fillStyle="#fff";//randomColor();//填充色
        ctx.strokeStyle="rgba(255,255,255,0.5)";//线条颜色，0.5是alpha透明度
        ctx.beginPath();
        for(var i=0;i<numberofsnow;i++){
            var p=snow[i];
            ctx.moveTo(p.x,p.y);
            ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
        }
        ctx.fill();
        ctx.stroke();
        update();
    }
    draw();
    function update(){
        for(var i=0;i<numberofsnow;i++){
            var p=snow[i];
            p.y+=Math.random()*10;
            if (p.y>h){
                p.y=0;
            }
        }
    }
    setInterval(draw,100);
    function randomColor(){//雪花动态变色
        var r=Math.floor(Math.random()*256);
        var g=Math.floor(Math.random()*256);
        var b=Math.floor(Math.random()*256);
        var rgb="rgb("+r+","+g+","+b+")";
        return rgb;
    }

    </script>
 </body>
</html>

 

 

posted @ 2016-06-24 08:43  天阳01  阅读(234)  评论(0)    收藏  举报