HTML5 CanvasのrequestAnimationFrame()動作中にマウス操作で点を表示したい

Question

Videoタグで表示している動画を、Canvas上でパラパラ漫画風に表示させています。

ここで使用しているrequestAnimationFrame()実行中のCanvas上に、マウスクリック操作で赤い点などを打って、赤い点も含めてCanvas画像を保存したいのですが、どうやらせっかく打った赤い点は、requestAnimationFrame()の連続処理により、かき消されるようです。

動画再生前の真っ白なCanvasでは赤い点が打てるので、おそらくそうではなかろうかと。

マウスクリックイベントで打った赤い点を常に最前面に表示させるのに、良い方法があればご教示頂きたく思います。

Answer 1

videoタグで表示している動画をcanvasに描画しているのであれば、requestAnimationFrameを実行するたびに次の処理を実行しているはずです。

(1)canvas全体をクリアする
(2)videoタグの情報をcanvasに出力する

canvasに描画された情報は単なるビットマップ情報なので、アニメーションさせることができません。よって描画内容を変更するためには、必ず上記のような処理を繰り返し実行する必要があります。

動画再生中にユーザがクリックした点は、(1)の処理を実行する際に消えてしまいます。この情報を残すためには、例えば次のように配列等を使用して、クリックされた座標の情報を記録しておき、動画を描画した後に復元する必要があります。

var axis = [];

// canvasがクリックされた時の処理
canvas.onclick = funciton(event){
    // 座標の値は、下記の値にcanvasの表示位置やウィンドウのスクロール量を加味したものになる
    var x = event.clientX,
        y = event.clientY;

    axis.push({x : x, y : y});
};

var render = function(){
    requestAnimationFrame(render);

    // 動画の内容をcanvasに出力処理
  ..........................
    // ユーザがクリックした情報を復元する処理
    for(var i = 0, length = axis.length; i < length; i++){
        context.beginPath();
        context.arc(axis[i].x, axis[i].y, 1, 0, Math.PI * 2, false);
        context.fill();
    }
};
requestAnimationFrame(render);

上記のサンプルは必要最低限の処理を抜き出して書いているので、実際には他にもきちんと処理を記述する必要があります。

Comments

[SaintKnowledge]

大変わかりやすい解説とサンプル、ありがとうございました。
さっそく試してみます。