画像を組み込んでいこう！

画像のトリミング

　Canvasでは画像ファイルを読み込んでそのまま表示するだけではなく、任意の領域を、任意の場所に、任意の大きさで表示させることが可能です。

　このような画像のトリミングも、先ほど紹介したdrawImageメソッドを使います。ただし、下記のように引数の数が9つになります。

ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

　元の画像の座標(sx, sy)から、横幅sw、縦幅shの領域をトリミングします。トリミングされた部分画像を、Canvasの座標(dx, dy)に、横幅dw、縦幅dhのサイズに伸縮して描画します。

　このようにdrawImageメソッドは、引数の数で動作が異なりますので、注意してください。

　今回は、前のページで使ったdigits.pngを使ってトリミングのサンプルを試してみましょう。この画像は、横幅25px、縦幅30pxの領域に1つの数字が収められ、0から9までの数字が横一列に結合されています。この画像をトリミングして、5の領域をCanvas上に表示してみましょう。

　元の画像の5の位置は(125, 0)の地点から横幅25ピクセル、縦幅30ピクセルの領域です。これをCanvasの左上の地点(0, 0)に横幅25ピクセル、縦幅30ピクセルのサイズ、つまり伸縮せずにオリジナルのサイズでCanvas上に表示します。

ケーススタディ

　では、実際にdrawImageメソッドのトリミングを使った簡単なアプリケーションを作ってみましょう。

　ここでは、これまで使ってきたdigits.pngを使います。この画像に含まれている0から9の数字をトリミングして、現在の西暦4桁を抽出して表示してみましょう。

　画像トリミングは、このケーススタディのように、事前にパーツを並べて結合した画像を用意し、動的にトリミングして目的の図を生成するには役に立ちます。カレンダー表示、カウンターといったアプリケーションに応用ができそうですね。