html5 canvas粒子形成下雪背景的效果
导读:收集整理的这篇文章主要介绍了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>
相关推荐:
HTML5超逼真下雪场景效果
HTML5 Canvas打造超梦幻网页背景特效
以上就是html5 canvas粒子形成下雪背景的效果的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: html5 canvas粒子形成下雪背景的效果
本文地址: https://pptw.com/jishu/584442.html