canvas画箭头demo

效果图：

代码：

<!DOCTYPE html>
<html>
<title>canvas画箭头demo</title>
<body>
    <canvas id="canvas" width="200" height="200" style="border:1px dotted #d3d3d3;"></canvas>
    <script>
         var canvas=document.getElementById("canvas");
        var context=canvas.getContext("2d");

        function Line(x1,y1,x2,y2){
            this.x1=x1;
            this.y1=y1;
            this.x2=x2;
            this.y2=y2;
        }
        Line.prototype.drawWithArrowheads=function(ctx,type){

            // 设置箭头样式
            ctx.strokeStyle="black";
            ctx.fillStyle="black";
            ctx.lineWidth=3;
            
            // 画线
            ctx.beginPath();
            ctx.moveTo(this.x1,this.y1);
            ctx.lineTo(this.x2,this.y2);
            ctx.stroke();

            if(type == 1){
                // 画向上的箭头
                var startRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
                startRadians+=((this.x2>this.x1)?-90:90)*Math.PI/-180;
                this.drawArrowhead(ctx,this.x1,this.y1-5,startRadians);
            }else{
                // 画向下的箭头
                var endRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
                endRadians+=((this.x2>this.x1)?90:-90)*Math.PI/-180;
                this.drawArrowhead(ctx,this.x2,this.y2+5,endRadians);
            
            }
        }
        Line.prototype.drawArrowhead=function(ctx,x,y,radians){
            ctx.save();
            ctx.beginPath();
            ctx.translate(x,y);
            ctx.rotate(radians);
            ctx.moveTo(0,0);
            ctx.lineTo(5,20);
            ctx.lineTo(-5,20);
            ctx.closePath();
            ctx.restore();
            ctx.fill();
        }

        // 创建一个新的箭头对象
        var line=new Line(50,50,50,155);
        var line1=new Line(60,50,60,155);
        // 第二个参数为1则箭头向上，不为1则箭头向下
        line.drawWithArrowheads(context,1);
        line1.drawWithArrowheads(context,2);
    </script>
</body>
</html>

 

posted @ 2017-06-13 18:51  RyanxChen  阅读(555)  评论(0)  编辑  收藏  举报