在带有视频的函数中使用Canvas和Drawimage

Using Canvas and Drawimage in functions with video

本文关键字：Canvas Drawimage 函数 视频      更新时间：2023-09-26

我使用HTML5画布和DrawImage函数来显示低速率视频。tnt为这个项目的启动提供了极好的建议：尝试使用Canvas和DrawImage在90度下显示低速率视频

虽然tnt的解决方案在加载时通过使用onload函数知道相机和角度时效果良好，但我需要能够在几个相机之间关闭和打开视频，并更改其他参数。要处理这个问题，需要一些单独的函数，但我还没能先在相机上执行setInterval，然后将不断变化的图像传递给DrawImagecam_1.jpg’是下面示例中的视频。下面的body onload中显示的函数在运行时也必须由其他例程调用。如有任何建议，我们将不胜感激。

var cam = null;
var c = null;
var ctx = null;
var ra = 0;
function init() {
cam = new Image;
c = document.getElementsByTagName('canvas')[0];
ctx = c.getContext('2d');
}
 function draw(cam) {
       ctx.save();
       ctx.clearRect( 0, 0, 240, 320 );
       ctx.translate( 240, 0);
       ctx.rotate(1.57);
       ctx.drawImage(cam, 0, 0 );
       ctx.restore();
       }
function inter() {
setInterval(function(){cam.src = 'cam_1.jpg?uniq='+Math.random();},500);
}
</script></head><body onload = "init(),  draw(cam), inter()" >

谢谢。

我建议您使用对象数组；像这样的东西：

var cams = []; // an array to hold you cams!
function addcam() {
  this.image = new Image;
  this.setting1 = 0;
  this.settingn = 0;
}  
cams[1] = addcam();
cams[1].image.src = "cam1.jpg";
cams[1].setting1 = 2;
setInterval(function(){cam.src = '+cams[1].image.src+'?uniq='+Math.random();},500);

@tnt，你有以下建议吗？谢谢：

var cams = []; // an array to hold you cams!  
function addcam() {
  this.image = new Image;
  this.setting1 = 0;
  this.settingn = 0;
}
function draw(camnum){
cams[1] = addcam();
cams[1].image.src = "cam_1.jpg";
cams[1].setting1 = 2;
cam = new Image;
c = document.getElementsByTagName('canvas')[0];
ctx = c.getContext('2d');
}
function inter() {
setInterval(function(){'cam.src = ' +cams[1].image.src+ '?uniq='+Math.random();},500);
}  
function draw(cam) {
       ctx.save();
       ctx.clearRect( 0, 0, 240, 320 );
       ctx.translate( 240, 0);
       ctx.rotate( 1.57);
       ctx.drawImage(this, 0, 0 );
       ctx.restore();
}
</script></head><body onload = "draw(cam), inter()" >
相关文章：