canvas入门级基本用法实现雨滴下落特效
Posted j1019
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas入门级基本用法实现雨滴下落特效相关的知识，希望对你有一定的参考价值。
canvas基础知识点参考各种文档，直接上代码，有非常详细注释
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas雨滴特效</title> <style> body{ margin: 0; overflow: hidden; } #rain{ display: block; background-color: #000; } </style> </head> <body> <canvas id="rain"></canvas> <script> //获取canvas元素 const canvas = document.querySelector(‘#rain‘); //设置canvas元素宽高的函数 var wX,wY; ~~function setSize(){ //监控窗口发生变化时自动调用setSize函数 window.onresize = arguments.callee; //获取浏览器窗口宽高 wX = window.innerWidth; wY = window.innerHeight; //给canvas设置宽高 canvas.width = wX; canvas.height = wY; }(); //获取绘制区域(相当于画笔,可在canvas中任意位置绘制图形) var ctx = canvas.getContext(‘2d‘); //随机产生两个数之间随机数 function random(min,max){ return Math.random()*(max-min) + min; } //生成雨滴的构造函数 function Rain(){}; //添加原型方法 Rain.prototype = { init : function(){ this.x = random(0,wX);//雨滴横坐标 this.y = 0;//雨滴纵坐标默认从最上方下落 this.v = random(3,4);//雨滴每秒下落的速度 this.h = random(0.9*wY,wY);//下落到窗口高度的90%~100% this.r = 1;//雨滴绽放的初始半径 this.vr = 0.4;//半径扩大的速度 }, draw : function(){ if(this.y<this.h){//判断是否在90%~100%之间 ctx.beginPath(); //抬笔作画 ctx.fillStyle = ‘#666‘; //内容实心用颜色填充 ctx.fillRect(this.x,this.y,4,8); //画矩形小雨滴 }else{//不在区间则以下落到地绽放成圆 ctx.beginPath(); ctx.strokeStyle = ‘#666‘; ctx.arc(this.x,this.y,this.r,0,Math.PI*2); ctx.stroke(); } }, move : function(){ if(this.y<this.h){//下落 this.y+=this.v;//每秒下落3~4滴的距离 }else{//绽放成圆 if(this.r<35){ this.r+=this.vr; }else{ this.init(); } } this.draw();//移动的雨滴画出来 } } //生成的雨滴要添加动画为方便找到存在数组中 var aRain = []; //创造雨滴函数 function createRain(num){ for(var i=0;i<num;i++){ setTimeout(function(){//每隔200毫秒生成一个 var rain = new Rain(); rain.init(); rain.draw(); aRain.push(rain); },200*i) } } createRain(50); //用定时器画帧形成动画 setInterval(function(){ // ctx.clearRect(0,0,wX,wY);//擦除上一个图形(下雪的感觉) // 这里不是擦除雨滴效果是加蒙版达到渐变效果 ctx.fillStyle = ‘rgba(0,0,0,0.05)‘; ctx.fillRect(0,0,wX,wY); for(var item of aRain){ item.move(); } },1000/144);//根据自己屏幕刷新频率设置(此处是144HZ) </script> </body> </html>
内容本人原创，有不足之处请见谅！欢迎指正！转载请注明出处附上链接，谢谢！
以上是关于canvas入门级基本用法实现雨滴下落特效的主要内容，如果未能解决你的问题，请参考以下文章