个回答

• 橙子111000

  2017-10-20 15:17:17

  var context = canvas.getContext('2d');
  var video = document.createElement('video');
  video.src = '吔屎吧梁非凡_x264压制.mp4';
  video.preload = 'preload';
  video.autoplay = 'autoplay';
  video.height = context.canvas.height;
  video.width = context.canvas.width;
  
  setInterval(function (){
    var pattern = context.createPattern(video, 'no-repeat');
     context.fillStyle = pattern;
     context.fillRect(0, 0, context.canvas.width, context.canvas.height);
     pattern = null;
  
     //drowStar...这里执行其他绘画步骤
  
  },100);

  测试可用，setInterval的时间间隔尽量调大，不然电脑风扇会狂飙...

  0

• 大空翼God

  2015-12-27 22:54:37

  对不起，之前的理解有点问题，createPattern可以接受第一个参数是HTMLVideoElement也就是你的

  <video src="movie.ogg"></video>

  对象，为何不显示视频，是因为你的程序只绘制了一次画板，当然不会有动态效果。
  

  至于video对象记录的当前图像帧数据，createPattern是如何获取的，已不在这个问题的范围内了。可以查看html5 video元素实现，我也是一知半解，可以问问老师。

  1

• 大空翼God

  2015-12-27 22:09:15

  这样写肯定不行的，我觉得第一个参数应该是一帧图像的数据，查了下文档

  createPattern 第一个参数是CanvasImageSource数据类型 

  typeof （HTMLImageElement or HTMLVideoElement or HTMLCanvasElement）CanvasImageSource；

  具体HTMLVideoElement数据类型我也没有了解。

  把你的代码这样改可行：

  //设置video填充
  var video = document.createElement("video");
  video.src = "movie.ogg";
  video.autoplay = "autoplay";
  setInterval(function(){
      var pattern= context.createPattern(video, "no-repeat");
      context.fillStyle = pattern;
      context.fillRect(0, 0, windowWidth, windowHeight);
      },
      16);

  
  

  1