首页 > 代码库 > canvas用数组方式做出下雨效果
canvas用数组方式做出下雨效果
效果图
1.做出canvas画布和声明一个用来存储雨滴的数组
var c=document.getElementById(‘myCanvas‘); var ctx= c.getContext(‘2d‘); var ary=[];
2.将雨滴的位置、大小得到
var x=Math.random()*1000;//在画布内随机生成雨滴x轴位置 var width=Math.random()*3;//随机生成雨滴宽度 var h=Math.random()*50+10;//随机生成雨滴长度 var y=-60;//雨滴出现位置
由于最后所有的东西都需要用setinterval包起来,所以这里的变量只能用做局部变量,不能用全局声明。
3.将生成的雨滴存到数组
var rain={ x:x, y:y, width:width, color:"white", h:h, fun:function(){ ctx.beginPath(); ctx.fillStyle=rain.color; ctx.fillRect(rain.x,rain.y,rain.width,rain.h); ctx.fill(); } }; ary.push(rain);
冒号前为键名,冒号后为之前声明的变量,用作键值,fun里是在画布上生成雨滴,最后通过push的方法将其存入数组。
4.让雨滴往下落,当雨滴落到画布外,将雨滴从数组中删除
var t=setInterval(function(){ rain.y+=10; if(rain.y>800){ clearInterval(t); ary.shift(rain); } },10);
在外面调用生成雨滴的函数时,需要加上声明的json名,不然调用不到,如果雨滴的y轴位置大于了画布高度,就停止下落,同时,用shift的方式将雨滴移出数组。
5。删除雨滴下落时的前面生成过的雨滴
function hh(){ ctx.clearRect(0,0,1000,800); ary.forEach(function(obj){ obj.fun(); }); requestAnimationFrame(hh); } hh();
用clearrect的方式将整个画布上的内容清空,由于雨滴是每次下落5px时就会再出现一个新的雨滴,如果不删除下落之前的雨滴,画布上就会出现很多,将其清空只剩下一个下落的雨滴,最后调用函数即可。
canvas用数组方式做出下雨效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。