在html5 canvas中绘制带箭头连线，需封装drawarrow函数，利用math.atan2计算角度，通过三角函数生成箭头顶点，结合moveto/lineto/stroke绘制；先设canvas宽高与2d上下文，再调用该函数连接流程图节点。
在 HTML5 Canvas 中绘制带箭头的流程图连线，核心是把“线段 + 箭头”封装成可复用的绘图逻辑，而不是靠手动计算每个三角形顶点。关键在于利用三角函数算出箭头方向，并结合 moveTo/lineTo 和 stroke 完成绘制。
准备画布与上下文
先确保页面中有一个 <canvas></canvas> 元素，并获取 2D 渲染上下文：
- 设置 canvas 的
width和height属性（不要仅靠 CSS 缩放，否则会模糊） - 调用
getContext('2d')获取绘图上下文 - 可选：设置
ctx.lineCap = 'round'和ctx.lineJoin = 'round'让线条转角更自然
计算箭头朝向与顶点坐标
箭头本质是一个小三角形，其底边垂直于连线方向。给定起点 (x0, y0) 和终点 (x1, y1)，步骤如下：
- 算出连线向量：
dx = x1 - x0，dy = y1 - y0 - 用
Math.atan2(dy, dx)得到连线角度angle - 箭头长度设为
len = 10，张角设为θ = Math.PI / 8（约22.5°） - 两个箭头侧边点坐标为：
x1 - len * Math.cos(angle ± θ)y1 - len * Math.sin(angle ± θ)
封装 drawArrow 函数
把上述逻辑写成函数，支持在起点、终点或两端加箭头：
- 函数签名示例：
drawArrow(ctx, x0, y0, x1, y1, { at: 'end', len: 12, angle: Math.PI/6 }) - 内部先用
ctx.beginPath()开始路径，ctx.moveTo(x0,y0)到ctx.lineTo(x1,y1)画主线 - 若
at === 'end'，再从(x1, y1)出发，画两条短线构成箭头尖 - 最后统一调用
ctx.stroke()渲染整条带箭头的线
集成到流程图绘制中
流程图中的节点（如“开始”“判断”“结束”）通常用矩形表示，连线则调用 drawArrow：
- 先用
fillRect和strokeRect绘制节点框，再用fillText添加文字 - 节点间连线时，传入两个节点中心坐标（或指定锚点，如底部中点→顶部中点）
- 例如：从“开始”框底部中点
(100, 90)连到“处理”框顶部中点(100, 150)，自动产生垂直向下箭头 - 如需虚线效果，可先实现
dashedLine扩展方法，再在其基础上叠加箭头逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
