動画をCanvasに描画するには？
HTML5 Videoは、動画の再生や停止などの制御はできても、表示されている内容に対してアクセスできないため、そのままだとピクセル操作を伴うエフェクト処理はできません。そこで、現在表示している動画の1フレームを画像（静止画）として切り出してCanvasに転送し、Canvas上でピクセルを操作します。
はじめに、動画をCanvasに転送するため、HTMLに以下のようなvideo要素とcanvas要素を用意します。今回はどちらも同じ表示サイズにしました。
<video id="myVideo" controls>
<source src="movie.mov" width="384" height="216">
<source src="movie.ogv" width="384" height="216">
</video>
<canvas id="myCanvas" width="384" height="216"></canvas>
HTMLの準備は以上で終わりです。問題はどのようにVideoからCanvasに転送するかですが、実はとても簡単です。以下のように、drawImage()の第1引数にvideo要素を指定するだけで、現在再生・表示されている動画の1フレームをCanvasに描画できるのです。
var video = document.getElementById("myVideo");
var can = document.getElementById("myCanvas");
can.getContext("2d").drawImage(video, 0, 0);
サンプル01は、再生中の動画の1フレームをCanvasに描画するだけのスクリプトです。ボタンをクリックすると、再生されている時点での動画がCanvasに転送されるはずです。
「映像を描画」ボタンをクリックすると、再生中の動画がキャンバスに描画される
時間を変えておいてから「映像を描画」ボタンをクリックすると、その時点での動画がキャンバスに描画される
●サンプル01[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>映像をキャンバスに描画</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/view.js"></script>
</head>
<body>
<h1>映像をキャンバスに描画</h1>
<video id="myVideo" controls>
<source src="movie.mov" width="384" height="216">
<source src="movie.ogv" width="384" height="216">
</video>
<canvas id="myCanvas" width="384" height="216"></canvas>
<div id="control">
<button onclick="drawVideo()">映像を描画</button>
</div>
</body>
</html>
●サンプル01[JavaScritp:view.js]
function drawVideo(){
var video = document.getElementById("myVideo");
var can = document.getElementById("myCanvas");
can.getContext("2d").drawImage(video, 0, 0);
}
