A.1 canvas 要 素 canvas 要 素 について 隅 々まで 知 るためにはW3Cの 仕 様 書 (http://www.w3.org/tr/html5/ the-canvas-element.htmlを 参 照 していただきたい 表 A-1と 表 A-2 には canvas 要 素 の

付 録 A Canvas Reference

A.1 canvas 要 素 canvas 要 素 について 隅 々まで 知 るためにはW3Cの 仕 様 書 (http://www.w3.org/tr/html5/ the-canvas-element.htmlを 参 照 していただきたい 表 A-1と 表 A-2 には canvas 要 素 の 属 性 とをまとめてある 表 A-1 canvas 要 素 の 属 性 属 性 型 デフォルト width number 300 canvasの 座 標 空 間 の 幅 height number 150 canvasの 座 標 空 間 の 高 さ 表 A-2 canvas 要 素 の canvas.getcontext( contextid, [...] canvas.todataurl( [string type], [...] canvas.toblob( function callback, [string type], [...] canvas 要 素 上 にコンテンツを 描 画 するためのAPIを 公 開 するコンテキ ストオブジェクトを 返 す contextid 引 数 は 返 されるコンテキストオブジェクトのタイプを 指 定 する ほかの 引 数 を 指 定 できるかどうかは コンテキストタイプに よって 決 まる 例 : var ctx = canvas.getcontext("2d"; // 2Dコンテキスト を 作 る キャンバスイメージから 作 られたdata: URLを 含 むstringを 返 す イメージ 形 式 は オプションのtype 引 数 でMIMEタイプという 形 で 指 定 できる typeのデフォルト 値 は image/pngである 一 部 の 形 式 では たとえばイメージの 品 質 を 指 定 するためのオプション 引 数 を 指 定 できるようになっている 例 : var uri = canvas.todataurl("image/jpeg", 0.7; canvasイメージでblobオブジェクトを 作 り そのBlobを 引 数 として callback 関 数 を 呼 び 出 す type 引 数 と オ プ シ ョ ン の 追 加 引 数 に つ い て は canvas.todata URL(を 参 照 のこと Blobオブジェクトの 詳 細 については http://dev.w3.org/2006/ webapi/fileapi/のw3c File API 仕 様 を 参 照 のこと A-2

A.2 2DコンテキストAPI この 節 では 2Dキャンバスコンテキストで 使 える 描 画 APIを 示 す 詳 細 は W3Cの 公 式 仕 様 書 (http://dev.w3.org/html5/2dcontext/を 参 照 していただきたい 状 態 の 管 理 表 A-3には 描 画 状 態 スタックを 管 理 するためのをまとめてある 表 A-3 状 態 管 理 ctx.save( ctx.restore( 描 画 状 態 スタックに 現 在 の 描 画 状 態 をプッシュする 描 画 状 態 スタックのスタックトップの 描 画 状 態 をポップし 描 画 状 態 を 復 元 する 描 画 状 態 は クリッピングリージョン 変 換 行 列 と 次 のプロパティの 値 から 構 成 される strokestyle fillstyle linewidth linecap linejoin miterlimit shadowoffsetx shadowoffsety shadowblur shadowcolor font textalign textbaseline globalalpha globalcompositeoperation A-3

変 換 図 形 パス イメージを 描 画 するとき すべての 座 標 はそのときの 変 換 行 列 によって 変 換 さ れる 表 A-4には この 行 列 を 書 き 換 えられるをまとめてある 表 A-4 変 換 ctx.scale( number y ctx.rotate( number angle ctx.translate( number y ctx.transform( number a, number b, number c, number d, number e, number f ctx.settransform( number a, number b, number c, number d, number e, number f 座 標 空 間 を 水 平 方 向 にx 倍 垂 直 方 向 にy 倍 にスケーリングするスケーリン グ 変 換 を 加 える 原 点 を 中 心 として 座 標 空 間 をangleラジアン 回 転 する 回 転 変 換 を 加 える 座 標 空 間 を 水 平 方 向 にx 単 位 垂 直 方 向 にy 単 位 移 動 する 平 行 移 動 変 換 を 加 える 現 在 の 変 換 行 列 に 次 の 行 列 を 掛 ける a c e b d f 0 0 1 変 換 行 列 を 単 位 行 列 にリセットしてから 次 の 行 列 を 掛 ける a c e b d f 0 0 1 A-4

図 形 とパス 2Dコンテキストは 線 描 したり なかを 塗 りつぶしたり クリッピングリージョンとして 使 っ たりできるパスを 描 画 するためのAPIを 豊 富 に 抱 えている 表 A-5には パス 描 画 関 連 のメソッ ドをまとめてある 表 A-5 パス ctx.beginpath( ctx.moveto( number y ctx.closepath( ctx.lineto( number y ctx.arcto( number x0, number y0, number x1, number y1, number radius ctx.quadraticcurveto( number cpx, number cpy, number y パスをリセットする 新 しいサブパスを 作 り 点 (x, yを 加 える 現 在 のサブパスを 閉 じ 閉 じたばかりのサブパスの 終 点 を 起 点 とす る 新 しいサブパスを 作 る 現 在 のサブパスに 点 (x, yを 追 加 し 直 前 の 点 と 直 線 で 結 ぶ アクティブなサブパスがなければ (x, yを 起 点 として 新 たにサ ブパスを 作 る 現 在 のサブパスに 円 弧 を 追 加 する 円 弧 は サブパスの 終 点 と(x0, y0を 結 ぶ 直 線 と(x0, y0 (x1, y1を 結 ぶ 直 線 を 接 線 とし 半 径 がradiusの 円 周 の 一 部 で かつ 短 い 方 である アクティブなサブパスがなければ (x0, y0を 起 点 として 新 たに サブパスを 作 る 現 在 のサブパスに 点 (x, yを 追 加 し 制 御 点 (cpx, cpyを 持 つ 2 次 ベジェ 曲 線 を 使 って 新 しい 点 と 直 前 の 点 を 結 ぶ アクティブなサブパスがなければ (cpx, cpyを 起 点 として 新 た にサブパスを 作 る A-5

( 表 A-5 続 き ctx.beziercurveto( number cp0x, number cp0y, number cp1x, number cp1y, number y ctx.rect( number width, number height ctx.arc( number radius, number startangle, number endangle, boolean anticlockwise ctx.fill( ctx.stroke( ctx.clip( ctx.ispointinpath( number y 現 在 のサブパスに 点 (x, yを 追 加 し 制 御 点 (cp0x, cp0y (cp1x, cp1yを 持 つ 3 次 ベジェ 曲 線 を 使 って 新 しい 点 と 直 前 の 点 を 結 ぶ アクティブなサブパスがなければ (cpx, cpyを 起 点 として 新 た にサブパスを 作 る (x, y (x + width, y (x + width, y + height (x, y + heightの 4 つの 点 を 直 線 で 結 んで 新 しいサブパスを 作 り 矩 形 にする サブパスは 閉 じられる (x, yを 中 心 とし 半 径 がradiusの 円 の 円 周 に 沿 って 円 弧 を 追 加 する 円 弧 の 起 点 終 点 は ラジアンで 指 定 されたstartAngle とendAngleの 角 度 に よ っ て 指 定 さ れ る オ プ シ ョ ン の anticlockwise 引 数 は 起 点 から 終 点 に 向 かう 向 きを 指 定 する デフォルト 値 はfalseである アクティブなサブパスがなければ 円 弧 の 起 点 を 使 ってサブパスが 作 られる アクティブなサブパスがある 場 合 は 円 弧 の 起 点 がサブ パスに 追 加 され それまでの 終 点 と 直 線 で 結 ばれる 現 在 のパスに 含 まれるすべてのサブパスを 現 在 のfillStyleで 塗 りつぶす 現 在 のパスに 含 まれるすべてのサブパスを 現 在 のstrokeStyle linewidth linecap linejoin miterlimitスタイルで 描 く 現 在 のクリッピングリージョンと 現 在 の 描 画 パスのすべてのサブパ スが 重 なり 合 う 部 分 をクリッピングリージョンに 設 定 する 点 (x, yが 現 在 のパスのなかにあればtrue そうでなければ falseを 返 す A-6

2Dコンテキストは パス 描 画 APIのほか 厳 密 に 矩 形 を 対 象 とするも 提 供 している 表 A-6にはそれらのをまとめてある 表 A-6 矩 形 ctx.clearrect( number width, number height ctx.strokerect( number width, number height ctx.fillrect( number width, number height (x, yを 左 上 隅 とし サイズがwidth heightの 矩 形 をクリアする リージョン 内 のすべてのピクセルが 透 明 な 黒 になる 現 在 のstrokeStyle linewidth linejoinスタイルを 使 って (x, yを 左 上 隅 とし サイズがwidth heightの 矩 形 をストロークする 現 在 のfillStyleスタイルを 使 って (x, yを 左 上 隅 とし サイズが width heightの 矩 形 を 塗 りつぶす A-7

フィルとストローク ストロークされたパス 塗 りつぶされたパスのスタイルは 表 A-7にまとめたプロパティに よって 決 まる 表 A-7 スタイルプロパティ プロパティ 型 デフォルト ctx.fillstyle any #000000 図 形 を 塗 りつぶすために 現 在 使 われているスタイル 有 効 な 値 は CSSカラーを 表 す 文 字 列 CanvasGradient オブジェクト CanvasPatternオブジェクトである ctx.strokestyle any #000000 図 形 をストロークするために 現 在 使 われているスタイル 有 効 な 値 は CSSカラーを 表 す 文 字 列 CanvasGradient オブジェクト CanvasPatternオブジェクトである ctx.linewidth number 1.0 図 形 をストロークするときに 現 在 使 われている 線 の 太 さ 座 標 空 間 の 単 位 で 指 定 する ctx.linecap string butt 線 端 の 形 状 として 現 在 使 われているスタイル 有 効 な 値 は butt round square ctx.linejoin string miter 角 の 形 状 として 現 在 使 われているスタイル 有 効 な 値 は bevel round miter ctx.miterlimit number 10.0 マイター 点 までの 限 界 を 示 す 比 率 として 現 在 使 われ ている 値 ctx.strokestyle ctx.fillstyleプロパティは CSSカラーのほか 表 A-8にまとめてあ るで 作 ったCanvasGradient あるいはCanvasPatternオブジェクトも 指 定 できる 表 A-8 グラデーションとパターン 関 数 ctx.createlineargradient( number x0, number y0, number x1, number y1 点 (x0, y0から 点 (x1, y1までの 線 形 グラデーションを 表 すCanvasGradientオブジェクトを 返 す グラデーションのカラーストップを 追 加 するには CanvasGradient オブジェクトのgradient.addColorStop(を 使 う 例 : var gradient = ctx.createlineargradient(0,0,1,1; gradient.addcolorstop(0.0, "red"; gradient.addcolorstop(0.5, "green"; gradient.addcolorstop(1.0, "blue"; A-8

( 表 A-8 続 き ctx.createradialgradient( number x0, number y0, number r0, number x1, number y1, number r1 ctx.createpattern( Object image, [string repetition] (x0, y0が 中 心 で 半 径 がr0の 円 と(x1, y1が 中 心 で 半 径 がr1 の 円 によって 作 られる 放 射 グラデーションを 表 すCanvasGradient オブジェクトを 返 す CanvasGradientオブジェクトの 詳 細 は ctx.createlineargradient( の 項 を 参 照 repetitionが 指 定 する 向 きに 繰 り 返 されたimageから 作 られ たCanvasPatternオブジェクトを 返 す image 引 数 は HTMLImageElement HTMLCanvasElement HTMLVideoElementのどれでもよい imageがhtmlvideoelementなら 現 在 の 再 生 位 置 のフレー ムが 使 われる repetitionはオプションで repeat repeat-x repeat-y no-repeatのどれかにすることができる デフォルトの 値 はrepeatである シャドウ ストロークまたはフィルされたパスには 表 A-9にまとめたプロパティを 使 ってシャドウエ フェクトを 加 えることができる 表 A-9 シャドウプロパティ プロパティ 型 デフォルト ctx.shadowoffsetx number 0.0 横 方 向 のシャドウの 幅 ctx.shadowoffsety number 0.0 縦 方 向 のシャドウの 幅 ctx.shadowblur number 0.0 シャドウにかけられるぼかしエフェクトの 強 さ 非 負 の 数 値 でなければならない ctx.shadowcolor string transparent black シャドウの 色 有 効 なCSSカラーでなけれ ばならない A-9

イメージ イメージの 描 画 関 連 のは 1 つしかないが 表 A-10に 示 すように2 通 りの 方 法 で 呼 び 出 せる 表 A-10 イメージ ctx.drawimage( Object image, [number width, number height] ctx.drawimage( Object image, number sx, number sy, number swidth, number sheight, [number width, number height] キャンバス 上 に 指 定 されたイメージを 描 画 する (x, yにイメージの 左 上 隅 を 揃 える オプションのwidth height 引 数 が 指 定 されている 場 合 イメージは 指 定 されたサイズにスケーリングされる image 引 数 は HTMLImageElement HTMLCanvasElement HTMLVideoElementのどれでもよい imageがhtmlvideoelementなら 現 在 の 再 生 位 置 のフレームが 使 わ れる 指 定 されたimageのサブリージョンをキャンバスに 描 画 する サブリージョンは 左 上 隅 が(sx, syでサイズがwidth heightの 矩 形 領 域 である A-10

テキスト 表 A-11と 表 A-12 には テキスト 描 画 に 関 連 するプロパティとをまとめてある 表 A-11 テキストプロパティ プロパティ 型 デフォルト ctx.font string 10px sans-serif 現 在 のフォント 有 効 なCSSフォントでな ければならない ctx.textalign string start 現 在 の テ キ ス ト 配 置 start end left rightのどれかにすることができる ctx.textbaseline string alphabetic テキストのベースライン 設 定 値 は top hanging middle alphabetic ideographic bottomの ど れ か に す る ことができる 表 A-12 テキスト ctx.filltext( string text, number maxwidth ctx.stroketext( string text, number maxwidth ctx.measuretext( string text 現 在 のfont textalign textbaselineの 値 を 使 ってキャンバスに 指 定 されたtextを 描 画 する フィルには 現 在 のfillStyleが 使 われる テキストは 位 置 (x, yにアンカリングされる オプションのmaxWidth 引 数 は 幅 制 約 を 追 加 するもので CSSピクセルで 指 定 する ctx.filltext(と 同 様 だが 塗 りつぶすのではなく 現 在 のctx. strokestyle ctx.linewidth ctx.linejoin ctx. miterlimitを 使 ってストロークする 現 在 のctx.font 値 を 使 って 指 定 されたtextを 描 画 するために 必 要 な 幅 を 計 算 する CSSピクセル 単 位 でwidthプロパティに 計 算 結 果 をセットし たTextMetricsオブジェクトを 返 す A-11

合 成 キャンバス 上 に 新 しい 図 形 パス イメージを 描 画 すると それらは 表 A-13の 合 成 プロパ ティを 使 ってもとのコンテンツとの 間 で 合 成 される 表 A-13 合 成 プロパティ プロパティ 型 デフォルト ctx.globalalpha number 1.0 canvas 要 素 に 描 画 する 図 形 イメー ジにアルファ 値 をを 適 用 する ctx.globalcompositeoperation string source-over 図 形 イメージをcanvas 要 素 上 にあっ たコンテンツと 合 成 するときに 使 われ る すべての 合 成 処 理 は PorterDuff (PD 操 作 (http://keithp.com/ ~keithp/porterduff/p253- porter.pdfがドキュメントしてい る 有 効 な 演 算 子 の 名 前 は 表 A-14 を 参 照 していただきたい 表 A-14には ctx.globalcompositeoperationプロパティとして 指 定 できる 有 効 な 値 を まとめてある のなかのAは 新 しい 図 形 イメージ Bはcanvas 要 素 上 の 既 存 のコンテン ツを 指 す 表 A-14 合 成 操 作 値 source-atop source-in source-out source-over destination-atop destination-in destination-out destination-over lighter copy xor Bが 透 明 でないところに 限 り Bの 上 にAをレンダリングする Bが 透 明 ではないところに 限 り Aだけをレンダリングする Bが 透 明 なところに 限 り Aだけをレンダリングする Aが 透 明 ではないところに 限 り Bの 上 にAをレンダリングする Bが 透 明 ではないところに 限 り Aの 上 にBをレンダリングする Aが 透 明 ではないところに 限 り Bだけをレンダリングする Aが 透 明 なところに 限 り Bだけをレンダリングする Aが 透 明 ではないところに 限 り Aの 上 にBをレンダリングする AとBの 和 をレンダリングする BにかかわらずAだけをレンダリングする Bが 透 明 なところにA Aが 透 明 なところにBをレンダリングする AもBも 透 明 ではないところを 透 明 にする A-12

ピクセル 操 作 表 A-15にまとめたイメージデータを 使 えば 個 々のピクセルの 値 にアクセスする ことができる ピクセルデータを 置 換 するときには 合 成 のルールは 無 視 されることに 注 意 し よう 表 A-15 イメージデータ ctx.getimagedata( number width, number height ctx.createimagedata( number width, number height ctx.createimagedata( ImageData imagedata ctx.putimagedata( ImageData imagedata, [number dirtyx, number dirtyy, number dirtywidth, number dirtyheight] 左 上 隅 が(x, yでサイズがwidth heightの 矩 形 領 域 のピクセル データを 収 めたImageDataオブジェクトを 返 す ImageDataオブジェクトの 詳 細 については 表 A-16 を 参 照 のこと CSSピクセルでwidth heightの 新 しいImageDataオブジェクト を 作 る 新 しいImageDataオブジェクトのすべての 値 は 0 になる つまり すべてのピクセルが 透 明 な 黒 になる 引 数 のimagedataオブジェクトと 同 じサイズの 新 しいImageData オブジェクトを 作 る 新 しいImageDataオブジェクトのすべての 値 は0になる つまり すべてのピクセルが 透 明 な 黒 になる 引 数 のimagedataオブジェクトからピクセルデータをキャンバスに コピーする データは(x, yが 左 上 隅 になるように 配 置 される オ プ シ ョ ン のdirtyX dirtyy dirtywidth dirtyheight 引 数 が 指 定 されている 場 合 指 定 された 矩 形 領 域 のデータだけがコ ピーされる この 操 作 は ctx.globalcompositeプロパティの 対 象 とはなら ず ctx.globalalphaやシャドウエフェクトの 影 響 も 受 けない 表 A-16には ctx.getimagedata( ctx.createimagedata(メ ソ ッ ド か ら 返 さ れ る ImageDataオブジェクトのプロパティをまとめてある A-13

表 A-16 ImageDataプロパティ プロパティ 型 imagedata.width number データの 幅 単 位 はデバイスピクセル imagedata.height number データの 高 さ 単 位 はデバイスピクセル imagedata.data CanvasPixelArray イメージデータのRGBA 値 を 格 納 する(width* height*4 個 の 要 素 を 持 つ 配 列 個 々の 値 は 0 か ら 255 までの 整 数 である アクセシビリティ たとえば 画 面 の 読 み 上 げなどとの 関 係 でcanvas 要 素 のアクセシビリティを 向 上 させることを 目 指 すワーキンググループが 現 在 活 動 をしている これは 現 在 進 行 形 の 活 動 なので 表 A-17 にまとめたは ターゲットブラウザではまだ 完 全 に 実 装 されていない 可 能 性 がある 表 A-17 アクセシビリティ ctx.drawfocusring( Element element, [boolean candrawcustom] ctx.setcaretselectionrect( Element element, number width, number height ctx.caretblinkrate( elementが 入 力 フォーカスを 持 っているか 入 力 フォーカス を 持 っている 要 素 の 子 孫 になっている 場 合 現 在 の 描 画 パスの まわりにネーティブのフォーカスリングを 描 画 する 引 数 の elementは canvas 要 素 の 子 でなければならない オプションのcanDrawCustom 引 数 がtrueなら ユーザーの システムがカスタムフォーカスリングを 描 画 するように 設 定 さ れているときに 限 り フォーカスリングを 描 画 する elementが 入 力 フ ォ ー カ ス を 持 ち candrawcustomが trueになっているのにユーザーのシステムがカスタムフォー カスリングを 描 画 するようにセットアップされていない 場 合 は trueを 返 す そうでなければ falseを 返 す 引 数 のelementが 入 力 フォーカスを 持 っているなら ユーザー エージェントがサポートするアクセシビリティ APIに 左 上 隅 が(x, yでサイズがwidth heightの 矩 形 領 域 を 与 える 引 数 のelementはcanvas 要 素 の 子 でなければならない x y width heightは すべて 現 在 の 変 換 行 列 によって 変 換 される elementが 入 力 フォーカスを 持 ち canvas 要 素 の 子 なら trueを 返 す そうでなければ falseを 返 す システムのブリンクの 頻 度 をm 秒 単 位 で 返 す システムがキャ レットのブリンク 頻 度 をサポートしない 場 合 は-1 を 返 す A-14