VIP会员
购物车
私信
发表新帖
立即签到
关注
回复
支持(
反对(
首页上一页 1 下一页尾页 1 条记录 1/1页
雨滴特效中波纹为什么会从空心变成实心的
发表在JavaScript答疑区
2017-06-05
是否精华
是
否
版块置顶:
是
否
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
body{margin:0;}
canvas{
display:block;
background:#000
};
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
<!--
var can = document.getElementById("canvas");//获取画布
var ctx =can.getContext("2d");//设置画布
var w = can.width = window.innerWidth;//获取窗口宽度赋值给can.width并保存到变量w
var h = can.height = window.innerHeight;//获取窗口高度赋值该can.height并保存到变量h
//监听窗口的变化
window.onresize = function(){
//获取新的w,y值
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.vy = random(4,5);//用来改变y值
this.maxh = random(0.8*h,0.9*h);
this.r = 1;//波纹的初始化路径
this.vr = 1;//半径增大的速度
this.a = 1;//初始化波纹透明度
this.va = 0.86;//增加透明系数
},
//绘制雨滴
draw: function(){
if(this.y > this.maxh){
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);//绘制圆形
ctx.fill();
ctx.strokeStyle = "rgba(0,255,255,"+this.a+")";
ctx.stroke();
}else{
ctx.fillStyle = "#0ff";
ctx.fillRect(this.x,this.y,2,10);
}
this.update();
},
update: function(){
if (this.y < this.maxh)
{
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();
}
}
}
}
var drops = [];
for(var i=0; i<30; i++){
setTimeout(function(){
var drop = new Drop();
drop.init();
drops.push(drop);
},i*200);
}
function move(){
ctx.fillStyle = "rgba(0,0,0,0.1)";
ctx.fillRect(0,0,w,h);
for(var i=0; i<drops.length; i++){
drops[i].draw();
}}
setInterval(move,10);
function random(min,max){
return Math.random()*(max-min)+min};
//-->
</script>
</body>
</html>
分享到：
