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

百变鹏仔 2小时前 #H5教程

文章标签粒子

本篇文章给大家带来的内容是关于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>

文章推荐

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

利用HTML5中的Canvas绘制笑脸的代码

使用HTML5 Canvas绘制阴影效果的方法

HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能

如何解决HTML5 虚拟键盘出现挡住输入框的问题

canvas 模拟实现电子彩票刮刮乐的代码