是否有可能對html5產生影響？

Question

美好的一天

是否有可能對html5產生影響？

即時計劃在我的背景上有一個照片展臺，例如在我的背景上是野生的，然後有一隻老虎在你有圖片的時候四處移動。

Answer 1

我想我知道你在問什麼？

畫布足夠快，可讓您在畫布上播放視頻，然後在移動視頻的頂部繪製人物圖片。

下面是一些示例代碼，演示如何將視頻繪製到畫布中。

然後，您將使用相同的畫布上下文將人員的照片添加到視頻。

效果就像天氣預報員在天氣圖頂部「綠色屏蔽」一樣。

<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>