JavaScript»キャンバス»画像を描くdrawImage 画像の一部を切り出して表示してみる

ファイル名: js-canvas/quest_00092.html

下のソースコードをうつして、キャンバスに図のように画像がぞうを表示ひょうじしてみましょう。使用する画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

ソースコード

const canvas = document.getElementById("image");
const context = canvas.getContext("2d");

const image = new Image();
image.src = "images/neko.png";
image.onload = function() {
  context.drawImage(image, 23, 86, 128, 40, 96, 140, 128, 40);
};

解説

もとの画像がぞうから切り出す位置いちとサイズを指定していして表示ひょうじすることができます。どの数値がなにを決めているのか確認かくにんしましょう。