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

度をラジアンに直します。

パラメーター

パラメーター	説明	型	既定値
deg	度で表した角度	number	必須

戻り値

引数	説明	型
rad	ラジアンで表した角度	number

getArcPointerByDeg

円周上で、その角度にあたる点を求めます。

パラメーター

パラメーター	説明	型	既定値
deg	ラジアンで表した角度	number	必須
r	半径	number	必須

戻り値

引数	説明	型
point	[x, y]	[number, number]

getTangentByPointer

円周上のある点における接線を求めます。

パラメーター

パラメーター	説明	型	既定値
x	x 座標	number	必須
y	y 座標	number	必須

戻り値

引数	説明	型
line	[傾き, 切片]	Array<number>

roundRectByArc

角の丸い長方形を描きます。短いほうの辺の半分より大きい角の半径は 半分に抑えられる ので、隣り合う角が重なることはありません。

パラメーター

パラメーター	説明	型	既定値
ctx	Canvas の 2D コンテキスト	CanvasRenderingContext2D	必須
...rest	x, y, w, h, r	number[]	必須

戻り値

戻り値はありません（void）

fanShapedByArc

扇形をひと切れ描きます。切れ目どうしのあいだの隙間も含みます。

パラメーター

パラメーター	説明	型	既定値
ctx	Canvas の 2D コンテキスト	CanvasRenderingContext2D	必須
maxRadius	外側の半径	number	必須
start	始まりの角度（ラジアン）	number	必須
end	終わりの角度（ラジアン）	number	必須
gutter	切れ目どうしの隙間の幅	number	必須

戻り値

戻り値はありません（void）

getLinearGradient

CSS の linear-gradient(...) の文字列を、Canvas の CanvasGradient に翻訳します。

createLinearGradient が受け取るのは始点と終点だけですが、CSS は向きを角度で表します。そこで円を 45 度ずつ 8 つの扇形に分け、正接を使って角度を、長方形の境界上の始点と終点の座標へ戻します。キーワードでの向き（to top / to bottom / to left / to right）は、そのまま直接扱います。

パラメーター

パラメーター	説明	型	既定値
ctx	Canvas の 2D コンテキスト	CanvasRenderingContext2D	必須
x	長方形の左上の角の x	number	必須
y	長方形の左上の角の y	number	必須
w	長方形の幅	number	必須
h	長方形の高さ	number	必須
background	例：linear-gradient(90deg, red, blue)	string	必須

戻り値

引数	説明	型
gradient	fillStyle や strokeStyle にそのまま代入できます	CanvasGradient

WARNING

色の停止位置には単位を付けられません（red 0, blue 1 のように書きます）。百分率で書くと（red 50%）解析の結果が NaN になり、addColorStop が例外を投げます。