비디오가있는 함수에서 캔버스와 Drawimage 사용하기

저속 비디오를 표시하기 위해 HTML5 캔버스와 DrawImage 함수를 사용하고 있습니다. 이 프로젝트를 착수하기위한 훌륭한 조언을했습니다 : 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

감사합니다. 내가이 일을하게 해줘. – Frank

@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 사용하기

답변

관련 문제