随手写的一个canvas 本想写成三角形 但存在bug 先记录 后面再改
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<link>
<meta name="page-view-size" content="640*530">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body{
background: #456E89;
}
.canvas {
height: 300px;
300px;
margin: 0 auto;
font-family: arial;
}
</style>
</head>
<body leftmargin="0" topmargin="0">
<div class="canvas">
<canvas id="cvs" width="300" height="300"></canvas>
</div>
<script type="text/javascript">
function createObj(obj){
this.obj=obj;
var node=this.obj.Node,
startX=this.obj.startX,
endX=this.obj.endX,
startY=this.obj.startY,
endY= this.obj.endY,
delay=this.obj.delay||0,
numx=Math.abs(endX-startX)/ (this.obj.time/100),
numy=Math.abs(endY-startY)/(this.obj.time/100);
// console.log(n)
this.obj.draw=function(){
node.beginPath();
node.moveTo(startX,startY);
setTimeout(function (){
var sx=startX,ex=endX,
sy=startY,ey=endY;
move();
function move(){
if(endX>startX) {
if(sx>=endX){
clearTimeout(timerx)
}else{
startX<endX?sx+=numx:sx-=numx;
var timerx=setTimeout(function(){
node.lineTo(sx,sy);
move()
},100);
}
}
if(endX<startX) {
if(sx<=endX) {
clearTimeout(timerx)
}else{
startY<endY?sx+=numx:sx-=numx;
var timerx=setTimeout(function(){
node.lineTo(sx,sy);
move()
},100);
}
}
if(endY>startY) {
if(sy>=endY){
clearTimeout(timery)
}else{
startY<endY?sy+=numy:sy-=numy;
var timery=setTimeout(function(){
node.lineTo(sx,sy);
move()
},100);
}
}
if(endY<startY) {
if(sy<=endY){
clearTimeout(timery)
}else{
startY<endY?sy+=numy:sy-=numy; var timery=setTimeout(function(){ node.lineTo(sx,sy); move() },100); } } node.strokeStyle=this.obj.color; node.lineWidth=this.obj.width; node.stroke(); } },delay); } return this.obj; } window.onload=function(){ var cvs=document.getElementById('cvs').getContext("2d"); var line2={ Node:cvs, startX:10, startY:20, endX:60, endY:180, time:9000, color:'#ffffff', 5, }; var l2=createObj(line2); l2.draw(); }</script></body></html>