用Canvas画带箭头的线(包括箭头向内和箭头向外)

首先要有一个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;
    }
}

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

tracyXiaoAi

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值