トップページ  > Canvasリファレンス

★Canvasリファレンス


広告

 Canvasの基本

 四角形 Simple shapes (rectangles)

context . fillRect(x, y, w, h) …… 塗りつぶしの四角形を描く
context . strokeRect(x, y, w, h) …… 輪郭の四角形を描く
context . clearRect(x, y, w, h) …… 四角形の形にクリアする

 直線・曲線・多角形・円(パスで図形を描く) Complex shapes (paths)

パス
context . beginPath() …… 現在のパスをリセットする
context . moveTo(x, y) …… 新しいサブパスの開始点を座標指定する
context . closePath() …… 最終座標と開始座標を結んでパスを閉じる
直線(多角形)
context . lineTo(x, y) …… 直前の座標と指定座標を結ぶ直線を引く
ベジェ曲線
context . quadraticCurveTo(cpx, cpy, x, y) …… 2次ベジェ曲線を引く
context . bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) …… 3次ベジェ曲線を引く
円と円弧
context . arcTo(x1, y1, x2, y2, radius) …… 直前の座標と直線でつながる円弧を作成する
context . arc(x, y, radius, startAngle, endAngle [, anticlockwise ] ) …… 円弧を作成する
四角形
context . rect(x, y, w, h) …… 四角形を作成する
パスのスタイル
context . fill() …… 現在の塗りつぶしスタイルでサブパスを塗りつぶす
context . stroke() …… 現在の線スタイルでサブパスを輪郭表示する
パスで切り抜き
context . clip() …… パスで切り抜き(クリッピング)する
パスの確認
context . isPointInPath(x, y) …… 座標がパスの内側にあるかどうかを確認する

 変形 Transformations

context . scale(x, y) …… 拡大縮小する
context . rotate(angle) …… 回転する
context . translate(x, y) …… 移動する
context . transform(a, b, c, d, e, f) …… 現在の変換マトリックスと掛け合わせて、変換マトリックスで変形する
context . setTransform(a, b, c, d, e, f) …… 現在の変換マトリックスをリセットして、変換マトリックスで変形する

 色と背景 Colors and styles

スタイル指定
context . strokeStyle = "色・グラデーション・パターン" …… 線・輪郭の色やスタイルを指定する
context . fillStyle = "色・グラデーション・パターン" …… 塗りつぶしの色やスタイルを指定する
グラデーション
gradient . addColorStop(offset, color) …… グラデーション色を追加する
gradient = context . createLinearGradient(x0, y0, x1, y1) …… 線形グラデーションを指定する
gradient = context . createRadialGradient(x0, y0, r0, x1, y1, r1) …… 円形グラデーションを指定する
背景パターン
pattern = context . createPattern(image, repetition) …… 背景パターンとその繰り返し方法を指定する

 線のスタイル Line styles

context . lineWidth = 線の幅 …… 線の幅を指定する
context . lineCap = "線端の形状" …… 線端の形状を指定する
context . lineJoin = "線接合の形状" …… 線の接合箇所の形状を指定する
context . miterLimit = 比率 …… 線の接合箇所をmiter表示にする限界を指定する

 影 Shadows

context . shadowColor = "色" …… 影の色を指定する
context . shadowOffsetX = オフセット距離 …… 影の水平方向のオフセット距離を指定する
context . shadowOffsetY = オフセット距離 …… 影の垂直方向のオフセット距離を指定する
context . shadowBlur = ぼかしレベル …… 影のぼかし効果のレベルを指定する

 透明度・合成方法 Compositing

context . globalAlpha = 透明度 …… 図形やイメージの透明度を指定する
context . globalCompositeOperation = "合成方法" …… 図形やイメージの合成方法を指定する

 テキスト Text

テキスト描画
context . fillText(text, x, y [, maxWidth ] ) …… 塗りつぶしのテキストを指定座標に描画する
context . strokeText(text, x, y [, maxWidth ] ) …… 輪郭のテキストを指定座標に描画する
テキスト属性の指定
context . font = "スタイル・サイズ・種類" …… フォントのスタイル・サイズ・種類を指定する
context . textAlign = "揃え位置" …… テキストの揃え位置を指定する
context . textBaseline = "ベースラインの位置" …… ベースラインの位置を指定する
テキスト描画の測定
metrics = context . measureText(text) …… テキストの描画幅を測定する
metrics . width …… テキストの描画幅を表す

 イメージ Images

context . drawImage(image, dx, dy) …… イメージを描画する
context . drawImage(image, dx, dy, dw, dh) …… 幅と高さを指定してイメージを描画する
context . drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) …… 使用範囲を指定してイメージを描画する

 イメージの操作 Pixel manipulation

ImageDataオブジェクトの操作
imagedata = context . createImageData(sw, sh) …… ImageDataオブジェクトを生成する
imagedata = context . createImageData(imagedata) …… ImageDataオブジェクトを生成する
imagedata = context . getImageData(sx, sy, sw, sh) …… 指定範囲のImageDataオブジェクトを取得する
context . putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ]) …… ImageDataオブジェクトを描画する
ImageDataオブジェクトの属性
imagedata . width …… ImageDataオブジェクトの幅を表す
imagedata . height …… ImageDataオブジェクトの高さを表す
imagedata . data …… RGBA順の一次配列データを返す

 フォーカス Focus management

 ポインタと選択 Caret and selection management

success = context . setCaretSelectionRect(element, x, y, w, h) …… 要素がフォーカスされているかどうかを確認する
rate = context . caretBlinkRate() …… ポインタの点滅レートを確認する

 描画状態の保存 The canvas state

context . save() …… 現在の描画状態を保存する
context . restore() …… 描画状態を保存した時点のものに戻す

 Canvasの条件 Conformance requirements

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ