<!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還是沒有加到啊，本意思是想一些雨滴效果讓這些雨滴可以有一定自增速度下落的。//麻煩各位大神幫忙看下。不需要什么環境的，可以直接運行本代碼。
canvas 中雨滴效果沒有出來，麻煩各位大神幫忙看下。
慕前端8664132
2017-05-14 18:52:40