Question

我有以下代码，可以根据需要使用mousemove：

在画布上移动图像

<!DOCTYPE html>  
  <head>  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <style type="text/css">  

  #canvas {  
   padding: 0px;  
   margin: 0px;  
   top:0;  
   left:0;  
   z-index: 30;  
   position: absolute;  
   width: 50%;  
   height: 50%;  
  }  
  </style>  
  </head>  
  <body>  
  <video id="video" autoplay="true" loop="true" >  
    <source src="video/xyz.ogg" type="video/ogg" />  
    <source src="video/xyz.mp4" type="video/mp4" />  
  <canvas id="canvas"></canvas>  
  <script>  
  document.addEventListener('DOMContentLoaded', function(){  
   var v = document.getElementById('video');  
   var canvas = document.getElementById('canvas');  
   var context = canvas.getContext('2d');  
   var canvas = $('canvas');
  canvas.mousemove(function(e){
    $('#imgFollow').offset({left:e.pageX-20,top:e.pageY+10});
  });
  </script>  
  <a id="imgFollow"><img  width="75px" height="75px" 
  src="http://i.imgur.com/Jwhcy45.png" class="canvas"/></a>
  </body>  
  </html>

但是当我用画布在画布上绘制视频时：

document.addEventListener('DOMContentLoaded', function(){  
   var v = document.getElementById('video');  
   var canvas = document.getElementById('canvas');  
   var context = canvas.getContext('2d');  
   //var cw = Math.floor(canvas.clientWidth / 100);  
   //var ch = Math.floor(canvas.clientHeight / 100);  
   var cw = Math.floor(canvas.clientWidth);  
   var ch = Math.floor(canvas.clientHeight);  
   canvas.width = cw;  
   canvas.height = ch;  
   v.addEventListener('play', function(){  
    draw(this,context,cw,ch);  
   },false);  
   },false);  
   function draw(v,c,w,h) {  
   if(v.paused || v.ended) return false;  
   c.drawImage(v,0,0,w,h);  
   setTimeout(draw,20,v,c,w,h);  
   }  
   var canvas = $('canvas');
   canvas.mousemove(function(e){
    $('#imgFollow').offset({left:e.pageX-20,top:e.pageY+10});
   });
   </script>  
   <a id="imgFollow"><img  width="75px"  height="75px"
   src="http://i.imgur.com/Jwhcy45.png" class="canvas"/></a>" class="canvas"/></a>`

然后使用mousemove在其上移动图像，它不会在视频上显示图像我能够看到它正在工作，但没有显示在视频上。任何答案或建议？

Mousemove在画布上有视频问题

0 个答案: