<!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>canvas雨滴效果</title>
<style>
body{
margin:0;
padding:0;
}
#canvas{
background:#000;
display:block;
}
</style>
</head>
<body>
<canvas id="canvas">您的浏览器支持本特效，请更换浏览器！！</canvas>
<script>
var can=document.getElementById("canvas");
//设置canvas 绘图环境
var ctx=can.getContext("2d");
var w=can.width=window.innerWidth;
var h=can.height=window.innerHeight;
window.onresize=function(){
w=can.width=window.innerWidth;
h=can.height=window.innerHeight;
}
//矩形
/*ctx.fillStyle="#ddd"
ctx.fillRect(100,100,50,50);
//圆形
ctx.fillStyle="cyan"
//ctx.arc(x,y,0,Math.PI*2,false)false表示为逆时针方向画
ctx.arc(200,200,50,0,Math.PI*2,false);
ctx.fill();//绘制方法
ctx.strokeStyle="#fff";
ctx.stroke()*/ //触笔方法 画边用的
//动画原理
//var y=0;
//setInterval(function(){
// ctr.clearRect()//清除矩形选区
// y++;
//},100)
function Drop(){
}
//给雨滴类添加原型方法
Drop.prototype={
init:function(){
this.x=random(0,w);
this.y=0;
this.vy=random(4,5)//下落的速度
this.maxh=random(0.8*h,0.9*h);//最大高度
this.r=1;
this.vr=1;
this.a=0.098;//波纹的透明度
},
draw:function(){
ctx.fillStyle="cyan";
ctx.fillRect(this.x,this.y,2,10);
this.update();
},
update:function(){
this.y+=this.vy;//执行一次加上之前的速度
//为什么这个this.y还是没有加到啊，本意思是想一些雨滴效果让这些雨滴可以有一定自增速度下落的。
//麻烦各位大神帮忙看下。不需要什么环境的，可以直接运行本代码。
},
}
var drop=new Drop();
var drops=[];
for(var i=0;i<30;i++){
drops.push(new Drop())
}
function move(){
for (var j=0;j<drops.length;j++ )
{
drops[j].init();
drops[j].draw();
console.log(drops[j])
}
}
move();
setInterval(move,2000)
//生成随机数功能
function random(min,max){
return Math.random()*(max-min)+min;//min~max
}
</script>
</body>
</html>问题==> update:function(){this.y+=this.vy;//执行一次加上之前的速度//为什么这个this.y还是没有加到啊，本意思是想一些雨滴效果让这些雨滴可以有一定自增速度下落的。//麻烦各位大神帮忙看下。不需要什么环境的，可以直接运行本代码。
添加回答
举报
0/150
提交
取消