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 コンテキストの全状態。 - Clip
Mask - クリップ領域(
clip())。画素ごとに「描いてよいか」を持つ。 - Draw
State save()/restore()で退避・復帰する描画状態。- Glyph
Bitmap - 1 文字ぶんの字形(アルファ値のビットマップ)。
- Image
Source - 転送元の画素(RGBA8・行優先)。
- Matrix
- アフィン変換行列
[a b c d e f]。 - Path
Builder - パス構築器。曲線は折れ線へ分割して保持する。
- SubPath
- パスを構成する副パス(連続した折れ線)。
- Surface
- Canvas のバッキングストア(ARGB8888 のピクセル配列)。
Enums§
- Fill
Rule - 塗りつぶし規則。
- LineCap
- 線端の形状(
lineCap)。 - Line
Join - 線の結合形状(
lineJoin)。 - Text
Align textAlign。- Text
Baseline textBaseline。
Constants§
- ARC_
SEGMENTS_ 🔒PER_ QUARTER - 円弧を折れ線化するときの、90 度あたりの分割数。
- BEZIER_
SEGMENTS 🔒 - ベジェ 1 本あたりの分割数。
- DEFAULT_
MITER_ LIMIT miterLimitの既定値。仕様どおり 10。- MAX_
CONTEXTS 🔒 - 同時に保持するコンテキスト数の上限。
- MAX_
SAVE_ 🔒DEPTH save()の入れ子上限。
Statics§
- CANVAS_
DIRTY 🔒 - JS が canvas へ描いたことを示す旗(エッジトリガ再描画用)。
- CONTEXTS 🔒
<canvas>ごとの 2D コンテキストを id で保持する表。- NEXT_ID 🔒
- 次に払い出す id。
Functions§
- align_
offset - 指定位置から見た、描き始めの x のずれ。
- arc_
steps - 掃引角に応じた分割数(最低 1)。
- baseline_
offset - 指定位置から見た、ベースラインの y のずれ。
- canvas_
dirty - 変化があったかを見る(降ろさない)。再描画するかの判断に使う。
- clear_
contexts - 保持している全コンテキストを破棄する(ページ遷移時に呼ぶ)。
- create_
context - 新しいコンテキストを作り、その id を返す。
- dash_
subpaths - 折れ線を破線に切り分ける。
- get_
image_ data Surfaceの一部をImageDataのバイト列(RGBA8・行優先)へ取り出す。- 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_
text_ align - parse_
text_ baseline - put_
image_ data ImageDataのバイト列をSurfaceへ書き戻す。- resize_
context - canvas の大きさ変更。
<canvas width>/heightへの代入で呼ぶ。 - scanline_
spans - 走査線
yとパスの交点を求め、塗るべき x 区間を返す(純粋関数)。 - tag_
for_ id - id からタグ文字列を作る。
- take_
canvas_ dirty - 変化があったかを見て、同時に降ろす。描画を始める側から呼ぶ。
- unit_
delta aからbへの単位ベクトルと距離。長さが 0 ならNone。- with_
context - id のコンテキストへ可変アクセスする。