<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
canvas{
background-color: black;
display: block;
}
</style>
<body>
<canvas id="canvas">
ni hao
</canvas>
<script>
var can=document.getElementById("canvas");
//设置绘图环境
var cxt=can.getContext("2d");
var w=can.width=window.innerWidth;
var h=can.height=window.innerHeight;
//让画布的宽高跟随浏览器变化
window.onresize=function(){
var w=can.width=window.innerWidth;
var h=can.height=window.innerHeight;
}
/*//设置画笔颜色
//cxt.fillStyle="red";
//绘制图形
//cxt.fillRect(0,0,50,50);//x,y,宽，高
//cxt.fill();填充方法（实心） cxt.stroke();触笔方法（空心）
//设置圆形的路径
//cxt.arc(250,250,4,0,Math.PI*2,false);//圆心坐标X,Y 半径r，从0度，弧度（math.pi*角度、180）
//cxt.fill();*/
var x=100,y=0;
/*setInterval(function(){
y++;
//清除
cxt.clearRect(0,0,w,h);
cxt.fillRect(x,y,50,50);
},10);*/
/*function move(){
y++;
cxt.clearRect(0,0,w,h);
cxt.fillRect(x,y,50,50);
requestAnimationFrame(move);//原生js的动画
}
move();*/
//面向对象
//创建雨滴对象
var drops=[];
function Drop(){}
//添加对象方法
Drop.prototype={
init:function(){
//初始化方法：设置每个雨滴的初始属性
this.x=random(0,w);
this.y=0;
//y方向的速度值
this.vy=random(2,3);
//最大高度
this.l=random(0.8*h,0.9*h);
//波纹的半径
this.r=1;
this.vr=1;
//判断雨滴消失的透明度
this.a=1;//趋向于0
this.va=0.96;//透明度的变化系数
},
draw:function(){//绘制图形
if(this.y>this.l)
{
cxt.beginPath();//先开始路径
cxt.arc(this.x,this.y,this.r,0,Math.PI*2,false);
cxt.strokeStyle="rgba(0,255,255,"+this.a+")";
cxt.stroke()
}
else
{
cxt.fillStyle="rgb(0,255,255)";
cxt.fillRect(this.x,this.y,2,2);
}
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();
}
}
}
}
/*var drop=new Drop();
drop.init();
drop.draw();*/
/*function dd(){for (var i=0;i<30;i++) {
var drop=new Drop();
drop.init();
//drop.draw();
drops.push(drop);
}
requestAnimationFrame(dd);
}
dd(); */
for (var i=0;i<30;i++) {
setTimeout(function(){
var drop=new Drop();
drop.init();
//drop.draw();
drops.push(drop);
},i*200);
}
function move(){
//先绘制透明层再绘制雨滴，雨滴把先绘制的雨滴覆盖
cxt.fillStyle="rgba(0,0,0,0.1)";
cxt.fillRect(0,0,w,h);
for (var i=0;i<drops.length;i++) {
drops[i].draw();
}
requestAnimationFrame(move);
}
move();
//生成随机数的方法
function random(min,max){
return Math.random()*(max-min)+min;
}
</script>
</body>
</html>
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
