FC2ブログ

映像を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プロパティを使う
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック