html5 canvas粒子形成下雪背景的效果

时间2024-01-23 17:07:48发布访客分类HTML浏览703

导读：收集整理的这篇文章主要介绍了html5 canvas粒子形成下雪背景的效果，觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章给大家带来的内容是关于HTML5 canvas粒子形成下雪背景的效果，有一定的参考价值，有需要的朋友可以参考...

收集整理的这篇文章主要介绍了html5 canvas粒子形成下雪背景的效果，觉得挺不错的，现在分享给大家，也给大家做个参考。本篇文章给大家带来的内容是关于HTML5 canvas粒子形成下雪背景的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

!doctyPE htML>
    html lang="en">
    head>
    meta charset="UTF-8" />
    tITle>
    canvas粒子形成下雪背景/title>
    body{
            margin: 0px;
            padding: 0px;
    }
    #canvas{
            display: block;
            background: #222;
    }
    /style>
    /head>
    body>
        canvas id="canvas">
    /canvas>
    /body>
    script>
        VAR canvas = document.getElementById("canvas");
    //获取canvas    var ctx = canvas.getContext("2d");
    //创建画笔    var w = canvas.width = window.innerWidth;
    //浏览器宽度    var h = canvas.height = window.innerHeight;
//浏览器高度    window.onresize = function(){
            w = canvas.width = window.innerWidth;
            h = canvas.height = window.innerHeight;
    }
    ;
    //当浏览器刷新的时候刷新    var num = 1000;
    //数量    var shuju = [];
    //空数组    for(i = 0;
    inum;
i++){
        shuju.push({
//数组末项添加            x : Math.random()*w,             y : Math.random()*h,            r : Math.random()*2        }
    );
        draw(shuju[i].x,shuju[i].y,shuju[i].r)//for循环循环darw function    }
    ;
        console.LOG(shuju[0]);
    function draw(x1,y1,r1){
            ctx.beginPath();
    //开始绘画        ctx.fillStyle = "#fff";
    //颜色        ctx.arc(x1,y1,r1,0,2*Math.PI,false)//arc园        ctx.fill();
//填充    }
    function chageY(){
            for(var i = 0;
    inum;
i++){
    //for循环            shuju[i].y += Math.random()*5;
                if(shuju[i].y >
 h){
    //大于高度                shuju[i].y = 0;
//等于0            }
                draw(shuju[i].x,shuju[i].y,shuju[i].r);
//调取        }
    }
    setInterval(function(){
            ctx.clearRect(0,0,w,h);
    //清楚画布 0 0 高度 宽度        chageY();
     }
    ,10);
    /script>