canvas绘制的直线动画
话不多说，请看代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>firstline</title>
<styletype="text/css">
body{
background:#456E89;
}
.canvas{
height:300px;
width:300px;
margin:0auto;
font-family:arial;
}
</style>
</head>
<body>
<divclass="canvas">
<canvasid="cvs"width="300"height="300"></canvas>
</div>
<scripttype="text/javascript">
varcvs=document.getElementById("cvs").getContext("2d");
functionAnim(opt){//初始化值
this.opt=opt;
}
//node表示画布节点
//staX表示开始x坐标
//staY表示开始y坐标
//len表示终点坐标，
//timing表示运行的间隔时间，
//num表示坐标增长的大小
//direc表示判断绘制线条的方向，false表示X轴，ture表示Y轴
//lw表示线宽的大小
//color表示绘制线条颜色
Anim.prototype.draw=function(){//绘制直线的线条
varopt=this.opt;//设置对象的属性
varadx=opt.staX;
varady=opt.staY;
varthat={
x:opt.staX,
y:opt.staY
};
varTime=setInterval(function(){
opt.direc//判断绘制方向
?
opt.len>ady?ady+=opt.num:ady-=opt.num:
opt.len>adx?adx+=opt.num:adx-=opt.num;
if(adx==opt.len||ady==opt.len){//停止循环
clearInterval(Time);
}
opt.Node.beginPath();//开始绘制线条
opt.Node.moveTo(that.x,that.y);
opt.Node.lineTo(adx,ady);
opt.Node.lineWidth=opt.lw||1;
opt.Node.strokeStyle=opt.color;
opt.Node.stroke();
},opt.timing);
};
Anim.prototype.txt=function(opc){//绘制文字
cvs.beginPath();
cvs.fillStyle="rgba(255,255,255,"+opc+")";
cvs.font="200pxarial";
cvs.fillText("L",100,200);
};
varline1=newAnim({//实例
Node:cvs,
color:"#fff",
staX:114,
staY:58,
len:134,
timing:50,
num:1,
direc:false,
lw:2
});
line1.draw();//执行绘制
varline2=newAnim({
Node:cvs,
color:"#fff",
staX:115,
staY:58,
len:200,
timing:20,
num:1,
direc:true,
lw:2
});
line2.draw();
varline3=newAnim({
Node:cvs,
color:"#fff",
staX:133,
staY:184,
len:58,
timing:20,
num:1,
direc:true,
lw:2
});
line3.draw();
varline4=newAnim({
Node:cvs,
color:"#fff",
staX:132,
staY:184,
len:203,
timing:35,
num:1,
direc:false,
lw:2
});
line4.draw();
varline5=newAnim({
Node:cvs,
color:"#fff",
staX:203,
staY:199,
len:115,
timing:35,
num:1,
direc:false,
lw:2
});
line5.draw();
varline6=newAnim({
Node:cvs,
color:"#fff",
staX:203,
staY:199,
len:184,
timing:50,
num:1,
direc:true,
lw:2
});
line6.draw();
vartest=newAnim();//绘制文字实例
setTimeout(function(){
varnum=0;
vartimes=setInterval(function(){
num++;
vart=num/100;
if(t===1){
clearInterval(times);
}
test.txt(t);
},50)
},3000)
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！