映像をcanvasへ描画

映像をCanvasへ描画
Canvasへ映像を描画するには
drawImage()の最初のパラメータに
video要素を指定するだけ
document.getElementById(“draw4”).addEventListener(“click”,fuction(){
var videoObj=document.getElementById(“myvideo”);
context.drawImage(videoObj,220,10);
},true);
忘れないように解説メモ
drawImage()のパラメータは
今回は、左から
video要素を格納した変数
横幅
縦幅
要素のidを変数へ格納しておくと使いやすい
これの使い道は
Webアプリなどで
サムネイル作成とかにつかえる
あと、注意点として
本来、映像は時間経過に伴い変化するが
Canvasへ描画されたものは
その中の一瞬の画像
ゲームとかのサンプル画像みたいなかんじ
これが、フレーム
描画するフレームを指定するには
videoオブジェクトの
currentTimeプロパティを使う

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です