zoukankan      html  css  js  c++  java
  • canvas+js 完成雪花绘制

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <style type="text/css">
    body {
    background:#45aad7;
    margin:0;
    padding:0;
    }
    html, body{
    height:100%;
    100%;
    }
    #myCanvas{
    height:100%;
    100%;
    display: block;
    }
    </style>

    <body>
    <canvas id="myCancva" width="1000px" height="600px">your browser does not support
    the Canvas element</canvas>
    <script type="text/javascript">
    /* <!-- 因为Canvas本身是没有绘图能力的,所以我们需要通过他的getContext方法返回课绘图的对象-->*/
    var canvas=document.getElementById('myCancva');
    var context=canvas.getContext('2d');

    var particles=[];//为雪花粒子创建一个数组
    for(var i=0;i<1500;i++){//循环500次生成500个雪花
    particles.push({//设置 x y 位置。以及速度。还有雪花的大小颜色
    x:Math.random()*window.innerWidth,
    y:Math.random()*window.innerWidth,
    vx:(Math.random()*1-.5),//速度为-0.5----0.5
    vy:(Math.random()*1+.5),//速度为0.5-1.5
    size:1+Math.random()*2,//大小是1---3
    color:"#fff"//白色

    });
    }
    function timeUpdata(e){
    //clearRect() 方法删除一个画布的矩形区域。
    context.clearRect(0,0,window.innerWidth,window.innerHeight);//清除画布区域
    var particle;
    for(var i=0;i<1500;i++){//遍历所有雪花
    particle=particles[i];
    particle.x+=particle.vx;//更新雪花的 x y 位置
    particle.y+=particle.vy;

    if(particle.x<0){
    particle.x=window.innerWidth;//当雪花移动到左侧以外时。使其在出现于窗口右侧
    }
    if(particle.x>window.innerWidth){
    particle.x=0;
    }
    if(particle.y>window.innerHeight){//当雪花移动到窗口顶部以外时,使其重新出现在窗口内部
    particle.y=0;
    }
    context.fillStyle=particle.color;//设置雪花颜色
    context.beginPath();//开始绘制雪花
    context.arc(particle.x ,particle.y, particle.size,0,Math.PI*2);
    context.closePath();//闭合路径
    context.fill();//填充颜色
    }
    }
    setInterval(timeUpdata,40);//40毫秒调用一次
    </script>
    </body>


    </html>

    //clearRect() 方法删除一个画布的矩形区域。

    //closePath() 方法创建从当前点到开始点的路径。

    //fill() 方法填充当前的图像(路径)。默认颜色是黑色。

  • 相关阅读:
    解决通用串行总线(USB)控制器有感叹号
    开发者需要了解的WebKit
    Win7系统搭建WiFi热点详细攻略
    给Qt生成的exe执行程序添加版本信息
    IIS(IISReset.exe)命令行
    .net开发微信公众平台
    使用ExitProcess()结束本进程、TerminateProcess 结束进程
    Hosts文件路径及修改方法
    本地动态SQL
    Oracle Package
  • 原文地址:https://www.cnblogs.com/wxhhts/p/7726073.html
Copyright © 2011-2022 走看看