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）は、そのまま直接扱います。

パラメーター

戻り値