良い一日
After Effects を html5 に置くことは可能ですか?
たとえば、私の背景にライブの小道具を備えたフォトブースを計画しています。ワイルドで、写真を撮っている間、トラが動き回っています。
良い一日
After Effects を html5 に置くことは可能ですか?
たとえば、私の背景にライブの小道具を備えたフォトブースを計画しています。ワイルドで、写真を撮っている間、トラが動き回っています。
私はあなたが何を求めているか知っていると思います?!
キャンバスは、キャンバスでビデオを再生し、動くビデオの上に人物の絵を描くのに十分な速さです。
キャンバスにビデオを描画する方法を示すサンプル コードを次に示します。
次に、同じキャンバス コンテキストを使用して、人物の写真をビデオに追加します。
この効果は、天気図の上に天気予報士が「グリーン スクリーン」で表示されているようなものです。
<canvas id=c></canvas>
<video id=v controls loop>
<source src=video.webm type=video/webm>
<source src=video.ogg type=video/ogg>
<source src=video.mp4 type=video/mp4>
</video>
<script>
document.addEventListener('DOMContentLoaded', function(){
var video = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var cw = Math.floor(canvas.clientWidth / 100);
var ch = Math.floor(canvas.clientHeight / 100);
canvas.width = cw;
canvas.height = ch;
video.addEventListener('play', function(){
draw(this,context,cw,ch);
},false);
},false);
function draw(video,canvasContext,w,h) {
if(video.paused || video.ended) return false;
c.drawImage(video,0,0,w,h);
setTimeout(draw,20,video,canvasContext,w,h);
}
</script>