canvasのdrawImage()メソッドで画像や動画を描画する

2年 ago
桜, 春樹
1 minute

CanvasのdrawImage()メソッドは、画像と動画を描画するために使用できます。

画像を描く：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
ctx.drawImage(img, 0, 0);
};

上記のコードでは、getElementById() メソッドで canvas 要素を取得した後、getContext(‘2d’) メソッドで描画コンテキストを取得します。次に、Image オブジェクトを作成し、src 属性に画像のパスを設定します。画像が読み込まれると onload イベントが発生し、drawImage() メソッドを呼び出して画像を canvas に描画します。

動画を制作する

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var video = document.getElementById('myVideo');
video.addEventListener('play', function() {
drawVideo(this, ctx, canvas.width, canvas.height);
}, false);
function drawVideo(video, ctx, width, height) {
ctx.drawImage(video, 0, 0, width, height);
setTimeout(drawVideo, 20, video, ctx, width, height);
}

上記のコードでは、getElementById()メソッドでcanvas要素とvideo要素を取得してから、getContext(‘2d’)メソッドで描画コンテキストを取得しています。次にvideo要素に再生イベントリスナーを追加し、動画が再生されるとdrawVideo()関数を呼び出します。drawVideo()関数はdrawImage()メソッドを使用して動画をcanvasに描画してから、setTimeout()メソッドを使用して20ミリ秒ごとにdrawVideo()関数を呼び出し、動画の連続描画を実現しています。

bannerAds