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

最新推荐文章于 2024-09-11 07:47:35 发布

置顶

tracyXiaoAi

最新推荐文章于 2024-09-11 07:47:35 发布

阅读量3.5k

点赞数

文章标签： function

本文链接：https://blog.csdn.net/tracyXiaoAi/article/details/5849695

版权

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

摘要由CSDN通过智能技术生成

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