Skip to main content

Module canvas2d

Module canvas2d 

Source
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§

BlitSpec
転送の指定(drawImage の 9 引数形に対応)。
Canvas2dContext
1 つの <canvas> に対する 2D コンテキストの全状態。
CanvasGradient
Canvas 2D のグラデーションオブジェクト。
CanvasPattern
Canvas 2D のパターンオブジェクト。
ClipMask
クリップ領域(clip())。画素ごとに「描いてよいか」を持つ。
ColorStop
グラデーションのカラーストップ。
DrawState
save()/restore() で退避・復帰する描画状態。
GlyphBitmap
1 文字ぶんの字形(アルファ値のビットマップ)。
ImageSource
転送元の画素(RGBA8・行優先)。
Matrix
アフィン変換行列 [a b c d e f]。
PathBuilder
パス構築器。曲線は折れ線へ分割して保持する。
SubPath
パスを構成する副パス(連続した折れ線)。
Surface
Canvas のバッキングストア(ARGB8888 のピクセル配列)。
SvgPathTokenizer 🔒
SVG パス文字列から浮動小数点数を順次読み取るトークナイザ。

Enums§

FillRule
塗りつぶし規則。
GradientKind
グラデーションの種別と幾何パラメータ。
LineCap
線端の形状(lineCap)。
LineJoin
線の結合形状(lineJoin)。
Repetition
createPattern のリピート方式。
TextAlign
textAlign。
TextBaseline
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