<!doctype html><!--声明文档类型:html-->
<html lang="en">
<head><!--头部-->
<meta charset="UTF-8"><!--字符编码:utf-8国际编码-->
<meta name="Keywords"content="关键词1,关键词2"><!--关键词-->
<meta name="Description"content="描述"><!--描述-->
<title>流星雨</title><!--网页标题-->
<style>
*{
margin:0;
padding:0;
}
#canvas{
background:#000;
display:block;
}
</style>
</head>
<body><!--身体-->
<canvas id="canvas">您的浏览器不支持cnavas绘图,请您更换浏览器!!</canvas>
<script>
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");//设置绘图环境
var w = can.width =window.innerWidth;//把窗口的宽度赋值给画布
var h = can.height =window.innerHeight;//把窗口的高度赋值给画布
var count = 30;//雨滴的个数
var drops = [];//定义一个空数组来保存雨滴个数
//浏览器窗口改变的时候重新获取宽度
window.onresize =function(){
w = can.width = window.innerWidth;
h = can.height = window.innerHeight;
}
function Drop(){}//定义雨滴对象
//添加原型对象方法
Drop.prototype = {
init : function(){//初始化
this.x =random(0,w);
this.y =0;
this.r =1;//初始半径
this.vy =random(4,5);//竖直方向的加速度 //从4~5之间的随机数
this.vr =1;//半径的加速度
this.a =1;//初始透明度
this.va =0.96;//透明度的变化系数
this.l =random(h*0.8,h*0.9);//雨滴下落的高度
},
draw : function(){//绘制
if (this.y >this.l)
{
ctx.beginPath();//一个画布中开始子路径的一个新的集合。丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。
ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false);//创建一个圆形 this.x圆的中心的 x 坐标。 this.y圆的中心的 y 坐标。 this.r圆的半径。 0 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。 2*Math.PI结束角,以弧度计。 false可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。
ctx.strokeStyle ="rgba(0,255,255,"+this.a+")";//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
ctx.stroke();//绘制出来路径
}else{
console.log(this.a)
ctx.fillStyle =color(this.a);//透明度
// console.log(ctx.fillStyle);
ctx.fillRect(this.x,this.y,2,10);//绘制"已填充"的矩形。默认的填充颜色是黑色。
}
this.update();
},
//更新坐标
update : function(){
if (this.y <this.l)
{
this.y +=this.vy;
}else{
if (this.a >0.03)
{
this.r +=this.vr;
if (this.r >50)
{
this.a *=this.va;
}
}else{
this.init();
}
}
}
}
//不断的更新雨滴位置
function move(){
ctx.fillStyle ="rgba(0,0,0,.1)";
ctx.fillRect(0,0,w,h);//这个在先绘制
for (var i=0;i<drops.length;i++ )
{
drops[i].draw();
}
//调用经动画
requestAnimationFrame(move);
}
//创建一个雨滴实例对象
//var drop = new Drop();
//drop.init();
//drop.draw();
//延迟产生每个雨滴
function setup(){
for (var i=0;i <count ;i++ )
{
(function(j){
setTimeout(function(){
var drop = new Drop();
drop.init();
drops.push(drop);
},j*200);
}(i))
}
}
setup();
move();
//封装一个产生随机数的方法
function random(min,max){
return Math.random()*(max-min) +min;
}
//封装一个随机颜色
function color(a){
//rgba
var r = Math.floor(Math.random()*255);
var g = Math.floor(Math.random()*255);
var b = Math.floor(Math.random()*255);
return "rgba("+r+","+g+","+b+","+a+")"
}
</script>
</body>
<html>
canvas实现雨滴动画
最新推荐文章于 2022-11-14 08:25:08 发布