用Canvas画带箭头的线（包括箭头向内和箭头向外）

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

置顶 tracyXiaoAi

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

阅读量3.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签： function

本文链接：https://blog.youkuaiyun.com/tracyXiaoAi/article/details/5849695

本文介绍了如何在HTML5 Canvas上绘制带箭头的线，包括箭头向内的线条和箭头向外的线条。通过定义角度、半径等参数，实现了不同方向的箭头效果，并展示了单箭头、双箭头在线内和线外的绘制方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先要有一个Canvas，例如<canvas id="canvas" height="800"></canvas>

然后再在Canvas上，画东西。

如下：

var tag="canvas";
var _ANGLE = 30;
var _RADIUS = 10.0;
var _ANGLE_CROSS = 90.0;
var _DIST_CROSS = 8.0;
var _DIST_OUTER = 20.0;
//单箭头
var p0=new jsPoint(100,100);
var p1=new jsPoint(200,100);
drawLine(tag,p0,p1);
drawArrow(tag, p0, p1);
//双箭头在线内
var p2=new jsPoint(100,200);
var p3=new jsPoint(200,200);
drawLine(tag,p2,p3);
drawArrow(tag, p2, p3);
drawArrow(tag, p3, p2);
drawCrossLine(tag, p2, p3);
drawCrossLine(tag, p3, p2);
//双箭头在线外
var p4=new jsPoint(100,300);
var p5=new jsPoint(200,300);
drawLine(tag,p4,p5);
drawArrowOuter(tag, p4, p5);
drawArrowOuter(tag, p5, p4);
drawCrossLine(tag, p4, p5);
drawCrossLine(tag, p5, p4);

function drawLine(target, p0, p1){
//get canvas
var canvas = document.getElementById(target);
var cxt = canvas.getContext("2d");
cxt.lineCap = "round";
cxt.lineJoin = "round";
cxt.strokeStyle = "red";
cxt.lineWidth = 5;
cxt.beginPath();
cxt.moveTo(p0.x, p0.y);
cxt.lineTo(p1.x, p1.y);
cxt.stroke();
}

function drawArrow(target, p0, p1){
    var nP = new jsPoint();
    var angle = Math.atan2(p0.x-p1.x, p0.y-p1.y);
    //rotate by _ANGLE
    var tAngle = angle - _ANGLE * Math.PI/180.0;
    nP.x = parseFloat(p1.x) + _RADIUS * Math.sin(tAngle);
    nP.y = parseFloat(p1.y) + _RADIUS * Math.cos(tAngle);
    drawLine(target, p1, nP);
    //lower part
    tAngle = angle + _ANGLE * Math.PI/180.0;
    nP.x = parseFloat(p1.x) + _RADIUS * Math.sin(tAngle);
    nP.y = parseFloat(p1.y) + _RADIUS * Math.cos(tAngle);
    drawLine(target, p1, nP);
}

function drawCrossLine(target, p0, p1){
    var nP = new jsPoint();
    var angle = Math.atan2(p0.x-p1.x, p0.y-p1.y);
    //rotate by _ANGLE_CROSS
    var tAngle = angle - _ANGLE_CROSS * Math.PI/180.0;
    nP.x = parseFloat(p1.x) + _DIST_CROSS * Math.sin(tAngle);
    nP.y = parseFloat(p1.y) + _DIST_CROSS * Math.cos(tAngle);

    drawLine(target, p1, nP);
    //lower part
    tAngle = angle + _ANGLE_CROSS * Math.PI/180.0;
    nP.x = parseFloat(p1.x) + _DIST_CROSS * Math.sin(tAngle);
    nP.y = parseFloat(p1.y) + _DIST_CROSS * Math.cos(tAngle);

    drawLine(target, p1, nP);
}

function drawArrowOuter(target, p0, p1){
    var nP = new jsPoint();
    var angle = _ANGLE_CROSS * 2.0 * Math.PI/180.0 + Math.atan2(p0.x-p1.x, p0.y-p1.y);
    //extend line
    nP.x = parseFloat(p1.x) + _DIST_OUTER * Math.sin(angle);
    nP.y = parseFloat(p1.y) + _DIST_OUTER * Math.cos(angle);
    drawLine(target, p1, nP);
    //draw arrows
    drawArrow(target, nP, p1);
}
function jsPoint(x,y){
    this.x=0;
    this.y=0;

    if(arguments.length==2)
    {
        this.x=x;
        this.y=y;
    }
}