美好的一天
是否可以将效果放在html5上?
我计划在我的背景上设置一个带有现场鼓膜的照相亭是狂野的,然后有一只老虎在你拍照时四处移动。答案 0 :(得分:0)
我想我知道你在问什么?!
Canvas足够快,可让您在画布上播放视频,然后在移动视频的顶部绘制一个人的照片。
以下是一些示例代码,展示了如何将视频绘制到画布中。
然后,您将使用相同的画布上下文将人物照片添加到视频中。
效果就像天气预报员在天气图上方“绿色屏蔽”一样。
<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>