Expand description
Canvas 2D の変換行列とパス幾何(純粋モジュール)。
<canvas> の 2D コンテキストは、現状 API 表面だけが存在し
全メソッドが dom_noop へ接続されている(=一切描画されない)。
実描画を入れる前提として、ラスタライズに依存しない部分——
アフィン変換の合成とパスの折れ線化——をここへ集約する。
ハードウェアにもグローバル状態にも依存しないので、ホスト側で検証できる。
§座標系
変換行列は CSS/Canvas と同じ [a b c d e f] の並びで、点 (x, y) は
x' = a*x + c*y + e
y' = b*x + d*y + fへ移る。transform() は現在の行列へ右から掛ける(後から積んだ変換が
点に対して先に効く)。この順序を取り違えると translate してから
rotate した図形が原点回りに回ってしまうので、試験で固定する。
Structs§
- Blit
Spec - 転送の指定(
drawImageの 9 引数形に対応)。 - Canvas2d
Context - 1 つの
<canvas>に対する 2D コンテキストの全状態。 - Canvas
Gradient - Canvas 2D のグラデーションオブジェクト。
- Canvas
Pattern - Canvas 2D のパターンオブジェクト。
- Clip
Mask - クリップ領域(
clip())。画素ごとに「描いてよいか」を持つ。 - Color
Stop - グラデーションのカラーストップ。
- Draw
State save()/restore()で退避・復帰する描画状態。- Glyph
Bitmap - 1 文字ぶんの字形(アルファ値のビットマップ)。
- Image
Source - 転送元の画素(RGBA8・行優先)。
- Matrix
- アフィン変換行列
[a b c d e f]。 - Path
Builder - パス構築器。曲線は折れ線へ分割して保持する。
- SubPath
- パスを構成する副パス(連続した折れ線)。
- Surface
- Canvas のバッキングストア(ARGB8888 のピクセル配列)。
- SvgPath
Tokenizer 🔒 - SVG パス文字列から浮動小数点数を順次読み取るトークナイザ。
Enums§
- Fill
Rule - 塗りつぶし規則。
- Gradient
Kind - グラデーションの種別と幾何パラメータ。
- LineCap
- 線端の形状(
lineCap)。 - Line
Join - 線の結合形状(
lineJoin)。 - Repetition
createPatternのリピート方式。- Text
Align textAlign。- Text
Baseline textBaseline。
Constants§
- ARC_
SEGMENTS_ 🔒PER_ QUARTER - 円弧を折れ線化するときの、90 度あたりの分割数。
- BEZIER_
SEGMENTS 🔒 - ベジェ 1 本あたりの分割数。
- DEFAULT_
MITER_ LIMIT miterLimitの既定値。仕様どおり 10。- MAX_
CONTEXTS 🔒 - 同時に保持するコンテキスト数の上限。
- MAX_
GRADIENTS 🔒 - MAX_
PATH2D 🔒 - MAX_
SAVE_ 🔒DEPTH save()の入れ子上限。
Statics§
- CANVAS_
DIRTY 🔒 - JS が canvas へ描いたことを示す旗(エッジトリガ再描画用)。
- CONTEXTS 🔒
<canvas>ごとの 2D コンテキストを id で保持する表。- GRADIENT_
MAP 🔒 - NEXT_
GRADIENT_ 🔒ID - NEXT_ID 🔒
- 次に払い出す id。
- NEXT_
PATH2D_ 🔒ID - PATH2D_
MAP 🔒
Functions§
- add_
color_ stop_ to_ gradient - add_
path_ to_ path2d - align_
offset - 指定位置から見た、描き始めの x のずれ。
- arc_
steps - 掃引角に応じた分割数(最低 1)。
- baseline_
offset - 指定位置から見た、ベースラインの y のずれ。
- canvas_
dirty - 変化があったかを見る(降ろさない)。再描画するかの判断に使う。
- clear_
contexts - 保持している全コンテキストを破棄する(ページ遷移時に呼ぶ)。
- clone_
path2d - create_
context - 新しいコンテキストを作り、その id を返す。
- create_
linear_ gradient - create_
path2d - create_
radial_ gradient - dash_
subpaths - 折れ線を破線に切り分ける。
- get_
gradient - get_
image_ data Surfaceの一部をImageDataのバイト列(RGBA8・行優先)へ取り出す。- get_
path2d_ subpaths - id_
from_ tag ObjKind::Hostのタグ文字列から id を取り出す。- line_
intersection - 2 直線の交点。
p1を通り向きd1の直線と、p2を通り向きd2の直線。 - mark_
canvas_ dirty - 画素が変わったことを記録する。
Surfaceの塗り口から呼ぶ。 - normalize_
dash - 破線のパターンを正規化する(
setLineDashの引数検査)。 - normalize_
sweep - 円弧の掃引角を求める。
- parse_
font_ size fontから文字の大きさ(px)を取り出す。- parse_
line_ cap - parse_
line_ join - parse_
repetition - 文字列から
Repetitionを判定する(仕様上、大文字小文字無視、空文字や未知の値は Repeat)。 - parse_
svg_ path_ into - SVG パス文字列
dを解析し、PathBuilderへ追加する。 - parse_
text_ align - parse_
text_ baseline - put_
image_ data ImageDataのバイト列をSurfaceへ書き戻す。- resize_
context - canvas の大きさ変更。
<canvas width>/heightへの代入で呼ぶ。 - sample_
gradient_ stops - カラーストップ配列から位置
t(0.0..=1.0)に対応する ARGB8888 色を線形補間する。 - scanline_
spans - 走査線
yとパスの交点を求め、塗るべき x 区間を返す(純粋関数)。 - tag_
for_ id - id からタグ文字列を作る。
- take_
canvas_ dirty - 変化があったかを見て、同時に降ろす。描画を始める側から呼ぶ。
- unit_
delta aからbへの単位ベクトルと距離。長さが 0 ならNone。- with_
context - id のコンテキストへ可変アクセスする。
- with_
path2d