Canvas 2D 几何

Canvas 2D 的路径构建与角度计算。所有路径函数只负责构建路径，不调用 fill() / stroke()，由调用方决定怎么上色。

使用

import { roundRectByArc, getLinearGradient } from 'ranuts/utils';

const ctx = canvas.getContext('2d')!;

roundRectByArc(ctx, 10, 10, 200, 80, 12);
ctx.fillStyle = getLinearGradient(ctx, 10, 10, 200, 80, 'linear-gradient(90deg, #06f, #0cf)');
ctx.fill();

API

getAngle

角度转弧度。

参数

返回

getArcPointerByDeg

根据角度计算圆上的点。

参数

返回

getTangentByPointer

根据圆上一点计算该点的切线方程。

参数

返回

roundRectByArc

绘制圆角矩形路径。圆角半径超过短边一半时会被钳制到一半，避免相邻圆角互相穿透。

参数

返回

无返回值（void）

fanShapedByArc

绘制扇形路径，含扇形之间的间隙。

参数

返回

无返回值（void）

getLinearGradient

把一个 CSS linear-gradient(...) 字符串翻译成 Canvas 的 CanvasGradient。

createLinearGradient 只接受起点和终点两个坐标，而 CSS 用角度描述方向，所以这里按 45° 划分 8 个区域，用正切把角度还原成矩形边界上的起止坐标。关键字方向（to top / to bottom / to left / to right）直接处理。

参数

返回