HTML5 キャンバスで画像を描画

HTML5 キャンバスはdrawImage()を使用して画像を描画します。キャンバス上に画像を描画する前に、Imageオブジェクトを作成し、画像をメモリに読み込む必要があります。

HTML5キャンバスには、キャンバス上に画像を描画するオプションがあります。drawImage()を使用できます。2この操作を実行するために、D上下文オブジェクトの様々な機能を使用します。drawImage()の機能は3種類あります:

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

最初のパラメータimageは描画する画像です。本文の後で、画像の作成と読み込み方法について説明します。
dxとdyパラメータは「destinationX」と「destinationY」の略です。これらのパラメータは、キャンバス上に描画する画像の位置を決定します。
dwとdhパラメータは「destinationWidth」と「destinationHeight」の略です。これらのパラメータは、画像を描画する際に画像の大きさを拡大縮小するかどうかを決定します。
sxとsyパラメータは「sourceX」と「sourceY」の略です。これらのパラメータは、ソース画像からキャンバス上に画像の矩形をコピーする位置を決定します。
swとshパラメータは「sourceWidth」と「sourceHeight」の略です。

画像の作成と読み込み

キャンバス上に画像を描画する前に、Imageオブジェクトを作成し、画像をメモリに読み込む必要があります。これはJavaScriptで行う方法です:

var　image　=　new　Image();
image.src　=　"https://ja.oldtoolbag.com/en/run/html/canvas-shot.png";

画像を描画する前に、画像が完全に読み込まれるまで待つ必要があります。画像が読み込まれたかどうかを確認するために、画像にイベントリスナーを追加します。画像を読み込む際にこのイベントリスナーが呼び出されます。以下のようになります:

image.addEventListener('load'　drawImage1);

このdrawImage1パラメータはイベントがトリガーされたときに呼び出される関数です。
これはキャンバス上に作成、ロード、描画する完全なコードの例です:

window.onload　=　function()　{
　　　　drawEx1();
}
var　image1　=　null;
function　drawEx1()　{
　　　　image1　=　new　Image();
　　　　image1.src　=
　　　　　　　　"https://ja.oldtoolbag.com/en/run/html/canvas-shot.png";
　　　　image1.addEventListener('load'　drawImage1);
}
function　drawImage1()　{
　　　　var　canvas　　=　document.getElementById("ex1");
　　　　var　context　=　canvas.getContext("2d");
　　　　context.drawImage(image1,　10,　10);
}

これはキャンバス上に描画時の上記コードの結果です:

HTML5 Canvasはサポートされていません

画像を拡大縮小

本文の冒頭に述べたように、画像を描画する際に画像を拡大縮小することができます。これは画像を描画し、拡大縮小するコードの例です。これは200の幅と100ピクセルの高さ:

var　width　　=　200;
var height =　100;
context.drawImage(image2,　10,　10, width, height);

これはキャンバス上に描画する時の画像の外観です。拡大された幅と高さを持っています:

HTML5 Canvasはサポートされていません

画像の一部を描画

キャンバス上に画像の一部のみを描画することができます。描画される部分は画像からコピーされた矩形です。以下はコードの例です:

var dx =　10;
var dy =　10;
var dw =　75;
var dh =　75;
var sx =　20;
var sy =　20;
var sw =　75;
var sh =　75;
context.drawImage(image3, sx, sy, sw, sh, dx, dy, dw, dh);

パラメータsx、sy、sw、sh（sx,syが矩形の開始と宣言され、swとshが幅と高さの矩形です）

これはキャンバス上に描画する時の画像の矩形の外観です:

HTML5 Canvasはサポートされていません