HTML5中Canvas实现流程图箭头的数学方向控制-H5教程-PHP中文网

Canvas绘制带方向箭头需先计算单位方向向量(ux,uy)和垂直向量(vx,vy)，再基于终点、headLen与angle确定箭头尖端、左侧点和右侧点坐标，最后用fill()绘制闭合三角形；极短线段需判空避免除零。

html5中canvas实现流程图箭头的数学方向控制

Canvas 中绘制带方向的箭头，关键在于根据起点和终点坐标计算出箭头头部的两个侧点——这需要向量运算和三角函数配合。不是简单画一条线再加个三角形，而是要让箭头始终“正对”线段方向，并随线段长度、粗细、角度自然缩放。

计算单位方向向量与垂直向量

给定起点 (x1, y1) 和终点 (x2, y2)，先求方向向量：
dx = x2 - x1，dy = y2 - y1。
再归一化得单位方向向量：
len = Math.sqrt(dx*dx + dy*dy)（避免除零，len 接近 0 时跳过绘制）
ux = dx / len，uy = dy / len。
接着求单位垂直向量（左旋90°）：
vx = -uy，vy = ux。

确定箭头头部三个顶点坐标

设箭头长度为 headLen（如 12），箭头张角一半为 angle（如 0.4 弧度），线宽为 lineWidth（影响箭头底边偏移）：
- 箭头尖端：就是终点 (x2, y2)
- 左侧底点：从终点反向沿方向向量退 headLen，再向左垂直偏移 headLen × tan(angle)
- 右侧底点：同上，但向右偏移（即用 -vx, -vy）

更稳健的写法（考虑线宽居中）：

箭头根部中心点：cx = x2 - ux * headLen，cy = y2 - uy * headLen
左侧点：lx = cx + vx * headLen * Math.tan(angle)，ly = cy + vy * headLen * Math.tan(angle)
右侧点：rx = cx - vx * headLen * Math.tan(angle)，ry = cy - vy * headLen * Math.tan(angle)

用 Canvas 路径绘制带箭头的线段

使用 ctx.beginPath() 连接四点构成封闭三角形（箭头）+ 主线段（可选）：

ctx.moveTo(x1, y1)
ctx.lineTo(x2, y2)（主干，可 stroke）
ctx.lineTo(lx, ly)
ctx.lineTo(rx, ry)
ctx.closePath()（闭合箭头三角形）
ctx.fill() 填充箭头（推荐用 fillStyle，比 stroke 更稳）

若只要箭头不画主线，把前两步去掉，直接从 (x2,y2) → (lx,ly) → (rx,ry) → close。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载