canvas画箭头demo

最新推荐文章于 2024-03-22 18:49:25 发布

weixin_30702887

最新推荐文章于 2024-03-22 18:49:25 发布

阅读量117

点赞数

原文链接：http://www.cnblogs.com/ryans/p/7002940.html

版权

效果图：

代码：

<!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>

转载于:https://www.cnblogs.com/ryans/p/7002940.html

weixin_30702887

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas画箭头demo

效果图：代码：<!DOCTYPE html><html><title>canvas画箭头demo</title><body> <canvas id="canvas" width="200" height="200" style="border:1px dotted #d3d3d3;"><...
复制链接

扫一扫