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§

CanvasDirection
Canvas 2D の書字方向(ctx.direction)。
CompositeOperation
合成モード(globalCompositeOperation / Porter-Duff)。
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_PATTERNS 🔒
MAX_SAVE_DEPTH 🔒
save() の入れ子上限。

Statics§

CANVAS_DIRTY 🔒
JS が canvas へ描いたことを示す旗(エッジトリガ再描画用)。
CONTEXTS 🔒
<canvas> ごとの 2D コンテキストを id で保持する表。
GRADIENT_MAP 🔒
NEXT_GRADIENT_ID 🔒
NEXT_ID 🔒
次に払い出す id。
NEXT_PATH2D_ID 🔒
NEXT_PATTERN_ID 🔒
PATH2D_MAP 🔒
PATTERN_MAP 🔒

Functions§

add_color_stop_to_gradient
add_path_to_path2d
align_offset
指定位置から見た、描き始めの x のずれ(後方互換: 既定 LTR)。
align_offset_with_direction
指定位置から見た、描き始めの x のずれ(書字方向対応)。
arc_steps
掃引角に応じた分割数(最低 1)。
baseline_offset
指定位置から見た、ベースラインの y のずれ。
canvas_dirty
変化があったかを見る(降ろさない)。再描画するかの判断に使う。
circle_poly 🔒
clear_contexts
保持している全コンテキストを破棄する(ページ遷移時に呼ぶ)。
clone_path2d
create_conic_gradient
create_context
新しいコンテキストを作り、その id を返す。
create_linear_gradient
create_path2d
create_pattern
create_radial_gradient
dash_subpaths
折れ線を破線に切り分ける。
get_gradient
get_image_data
Surface の一部を ImageData のバイト列(RGBA8・行優先)へ取り出す。
get_path2d_subpaths
get_pattern
id_from_tag
ObjKind::Host のタグ文字列から id を取り出す。
is_point_in_path
指定した座標 (x, y) がパス(subpaths)の内部に含まれるかを判定する(W3C isPointInPath 準拠)。
is_point_in_stroke
指定した座標 (x, y) がストローク線(subpaths, line_width)の範囲内にあるかを判定する(W3C isPointInStroke 準拠)。
is_point_in_stroke_styled
指定した座標 (x, y) が、線幅・端点・結合・破線パターンを反映したストローク範囲内にあるかを判定する(W3C isPointInStroke 準拠)。
line_intersection
2 直線の交点。p1 を通り向き d1 の直線と、p2 を通り向き d2 の直線。
mark_canvas_dirty
画素が変わったことを記録する。Surface の塗り口から呼ぶ。
normalize_convex_poly 🔒
normalize_dash
破線のパターンを正規化する(setLineDash の引数検査)。
normalize_sweep
円弧の掃引角を求める。
offset_subpaths 🔒
パスを (dx, dy) だけ平行移動した新しい副パス列を生成する(Canvas 2D Shadow用)。
parse_canvas_direction
文字列から CanvasDirection を判定する(大文字小文字無視)。
parse_composite_operation
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
polygon_signed_area
多角形の符号付き面積を計算する(画面座標系: Y下向き)。
put_image_data
ImageData のバイト列を Surface へ書き戻す。
resize_context
canvas の大きさ変更。<canvas width>/height への代入で呼ぶ。
sample_gradient_stops
カラーストップ配列から位置 t(0.0..=1.0)に対応する ARGB8888 色を線形補間する。
scanline_spans
走査線 y とパスの交点を求め、塗るべき x 区間を返す(純粋関数)。
set_pattern_transform
stroke_to_outline
パス(折れ線群)を、指定された線幅・端点形状・結合形状に従って 閉じたポリゴン(アウトライン)のサブパス群に変換する純粋幾何関数。
svg_arc_to_center 🔒
W3C SVG 1.1 Appendix F.6.5: 端点パラメータ (x1, y1, rx, ry, phi, large_arc, sweep, x2, y2) を中心パラメータ (cx, cy, rx, ry, phi, theta1, theta2, anticlockwise) に変換する。
tag_for_id
id からタグ文字列を作る。
take_canvas_dirty
変化があったかを見て、同時に降ろす。描画を始める側から呼ぶ。
unit_delta
a から b への単位ベクトルと距離。長さが 0 なら None。
with_context
id のコンテキストへ可変アクセスする。
with_path2d