html5 canvas粒子形成下雪背景的效果-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

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;i<num;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;i<num;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>

登录后复制

相关推荐