在視頻功能中使用畫布和Drawimage

我使用HTML5畫布和DrawImage函數來顯示低速率視頻。 TNT做了精彩的建議獲得這個項目離地面：Trying to use Canvas and DrawImage to display low-rate video at 90 degrees 在視頻功能中使用畫布和Drawimage

而當相機和角度在加載時使用的onload函數稱爲TNT的解決方案工作得很好，我需要能夠打開視頻關閉和開啓幾臺攝像機並改變其他參數。爲了解決這個問題，我們需要一些單獨的功能，但是我沒有能夠先在相機上執行setInterval，然後將不斷變化的圖像傳遞給DrawImage。 'cam_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()" >

謝謝。

來源

2012-02-06 Frank

我建議你使用一個對象數組;像這樣：

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

來源

2012-02-07 06:01:05

謝謝tnt。讓我來研究一下。 – Frank 2012-02-08 16:42:34

@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()" >

來源

2012-02-08 19:04:12 Frank

在視頻功能中使用畫布和Drawimage

回答

相關問題