canvas画线条 

随手写的一个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;
        width: 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',            width:5,        };        var l2=createObj(line2);       l2.draw();    }</script></body></html>
posted @ 2017-02-05 16:28  chaimens  阅读(136)  评论(0)  编辑  收藏  举报