トップページ
> Canvasリファレンス
★Canvasリファレンス
| 基本 | 四角形 | 多角形・円 | 変形 |
|---|---|---|---|
| 色と背景 | 線のスタイル | 影 | 透明度・合成方法 |
| テキスト | イメージ | イメージの操作 | |
| フォーカス | ポインタと選択 | 描画状態の保存 | Canvasの条件 |
広告
Canvasの基本
四角形 Simple shapes (rectangles)
context . fillRect(x, y, w, h) …… 塗りつぶしの四角形を描く
context . strokeRect(x, y, w, h) …… 輪郭の四角形を描く
context . clearRect(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) …… 現在の変換マトリックスをリセットして、変換マトリックスで変形する
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表示にする限界を指定する
context . lineCap = "線端の形状" …… 線端の形状を指定する
context . lineJoin = "線接合の形状" …… 線の接合箇所の形状を指定する
context . miterLimit = 比率 …… 線の接合箇所をmiter表示にする限界を指定する
影 Shadows
context . shadowColor = "色" …… 影の色を指定する
context . shadowOffsetX = オフセット距離 …… 影の水平方向のオフセット距離を指定する
context . shadowOffsetY = オフセット距離 …… 影の垂直方向のオフセット距離を指定する
context . shadowBlur = ぼかしレベル …… 影のぼかし効果のレベルを指定する
context . shadowOffsetX = オフセット距離 …… 影の水平方向のオフセット距離を指定する
context . shadowOffsetY = オフセット距離 …… 影の垂直方向のオフセット距離を指定する
context . shadowBlur = ぼかしレベル …… 影のぼかし効果のレベルを指定する
透明度・合成方法 Compositing
context . globalAlpha = 透明度 …… 図形やイメージの透明度を指定する
context . globalCompositeOperation = "合成方法" …… 図形やイメージの合成方法を指定する
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) …… 使用範囲を指定してイメージを描画する
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
shouldDraw = context . drawFocusRing(element, x, y, [ canDrawCustom ]) …… canvasのどの部分がフォーカスされているかを示す
ポインタと選択 Caret and selection management
success = context . setCaretSelectionRect(element, x, y, w, h) …… 要素がフォーカスされているかどうかを確認する
rate = context . caretBlinkRate() …… ポインタの点滅レートを確認する
rate = context . caretBlinkRate() …… ポインタの点滅レートを確認する
描画状態の保存 The canvas state
Canvasの条件 Conformance requirements
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
© HTMQ