[HTML5] Canvasに画像を貼り付ける

HTML5のCanvas上に絵を描画することが可能ですが、さすがにすべてをプログラムで描画するのは現実的ではありません。というわけで今回はJPEGやPNGなどの画像を貼り付ける方法になります。

今回は「ゆるドラシル」のアセットを利用させていただきました。 yurudora.com

画像を貼り付ける
素材
参考ページ

画像を貼り付ける

シンプル版

何も考えずにJPEGやPNG、WebPなどブラウザが解釈できる画像をCanvasに貼り付けるだけらな、ctx.drawImage()メソッドを実行するだけです。

ctx.drawImage(image, dx, dy)

image: Image, Canvas, Videoのいずれかの要素(オブジェクト)
dx, dy: 画像を貼り付けるcanvasの位置を指定。canvasの左上を0とした座標です。dxがX, dyがY。

サンプルコード

必要な箇所の抜粋です。ここでのポイントは画像がブラウザに読み込まれた後にctx.drawImage()を実行する必要があります。

<canvas id="board" width="460" height="460"></canvas>

<script>
window.onload = ()=>{
  // canvas準備
  const board = document.querySelector("#board");  //getElementById()等でも可。オブジェクトが取れれば良い。
  const ctx = board.getContext("2d");

  // 画像読み込み
  const chara = new Image();
  chara.src = "/image/yurudora/2_stand/1248010201.png";  // 画像のURLを指定
  chara.onload = () => {
    ctx.drawImage(chara, 0, 0);
  };
};
</script>

実行例

元画像はこれなんですが、画像サイズが460x680あるのに対して、Canvasの大きさが460x460と高さがオーバーしてしまいます。この場合はエラーになるわけではなく単にはみ出した部分がカットされます。

元画像を縮小・拡大してから貼り付ける

ctx.drawImage()は引数の数で挙動が変わります。縦と横のサイズを追加で指定すると、自動で縮小/拡大してくれます。

ctx.drawImage(image, dx, dy, dWidth, dHeight)

dWidth, dHeight: Canvas上での画像サイズを指定。dWidthが横幅、dHeightが高さ。アスペクト比(縦横比)が狂った指定になった場合、狂った状態で貼り付けられます。

サンプルコード

ctx.drawImage()に第3・第4引数を追加しただけです。

<canvas id="board" width="460" height="460"></canvas>

<script>
window.onload = ()=>{
  const board = document.querySelector("#board");
  const ctx = board.getContext("2d");

  const chara = new Image();
  chara.src="/image/yurudora/2_stand/1248010201.png";
  chara.onload = ()=>{
    ctx.drawImage(chara, 0, 0, 230, 340);  // ★ここを変更★
  };
};
</script>

実行例

元の画像を縮小して貼り付けたので、今度はCanvasの中に収まりましたね。

元画像の一部分を切り抜いて貼り付ける

いわゆるトリミングです。Canvasでスプライトアニメなどを実装するときに利用できますね。ただし引数が一気にグワッと増えますｗ

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

sx, sy: 元画像を切り出すにあたり、始点となる左上の座標を指定します。sxがX座標,syがYz座標。
sWidth, sHeight: 元画像を切り出すにあたり、始点(sx,sy)からの横幅と高さを指定します。sWidthが横幅、sHeightが高さ。
dx, dy, dWidth, dHeight: 切り抜いた後の画像をCanvasのどこに貼り付けるか表示を開始する座標をdx,zyで、どの程度の画像サイズにするかをdWidth, dHeightで指定します。切り抜く前ではなく切り抜いた後の画像サイズである点に注意が必要です。

サンプルコード

ctx.drawImage()の引数をガラッと刷新しました。

<canvas id="board" width="460" height="460"></canvas>

<script>
window.onload = ()=>{
  const board = document.querySelector("#board");
  const ctx = board.getContext("2d");

  const chara = new Image();
  chara.src = "/image/yurudora/2_stand/1248010201.png";
  chara.onload = ()=>{
    ctx.drawImage(chara,
         150,  // sx      (元画像の切り抜き始点X)
         130,  // sy      (元画像の切り抜き始点Y)
         130,  // sWidth  (元画像の切り抜きサイズ：横幅)
         180,  // sHeight (元画像の切り抜きサイズ：高さ)
           0,  // dx      (Canvasの描画開始位置X)
           0,  // dy      (Canvasの描画開始位置Y)
         480,  // dWidth  (Canvasの描画サイズ：横幅)
         680   // dHeight (Canvasの描画サイズ：高さ)
    );
  };
};
</script>