【Canvas入門4】HTML5のCanvasを使って画像を表示させる方法

今回はcanvasを使って画像を縮小したり拡大してから表示させる方法を紹介していきたいと思います。

canvasを使って画像を表示させる方法

html

<canvas id="canvas" width="842" height="842"></canvas>

今回はサンプルとして幅842pxの画像を使うのでcanvasに幅842px、高さ842pxを指定します。

javascript

let canvas = document.getElementById('canvas');
let cv = canvas.getContext('2d');

let img = new Image(); //Imageオブジェクトを生成
img.src = "img.png";  // 画像のURLを指定
img.onload = function(){
	cv.drawImage(img, 0, 0);
}

canvasに画像を読み込むためにはまずがImageオブジェクトを生成します。

次にそして画像のURLを指定してあげます。

画像はdrawImage() メソッドを使って表示させますが画像は非同期で読み込まれるためそのままだと画像が表示されません。

なので画像の読み込みが完了してからdrawImage() メソッドを呼び出すようにします。

drawImageメソッド

drawImageの構文は下記になります。

drawImage(image, x, y, width, height)

xとyには位置を指定してwidthとheightには幅と高さを指定します。

widthとheightと高さを省略するとそのままのサイズで表示されます。

サンプル

画像を縮小または拡大してから表示させる

画像を縮小または拡大してから表示させるためにはさきほどのdrawImageメソッドに幅と高さを指定してあげることで縮小、拡大して表示させることができます。

たとえば元の画像が画像を幅500px、高さ500pxで画像を縮小させて表示させたい場合は幅300px、高さ300pxを指定してあげます。

drawImage(image, 0, 0, 300, 300)