JavaScript는`requestAnimFrame()`에있는 동안 캔버스에 그립니다.

Question

requestAnimFrame() (별도의 캔버스 용)에있는 동안 캔버스에 그리려고하고 있으며 모든 시도가 실패했습니다. requestAnimFrame(drawLoop)을 포함하는 함수 내부에서 canvasFuntion()의 값에 실시간으로 액세스 할 수 있어야합니다.

이

(명확하게하기 위해, requestAnimFrame()이 requestAnimationFrame() 동일) 지금 몇 일 동안이 문제를 해결하기 위해 시도 된대로

function canvasFunction(){ 
document.addEventListener('DOMContentLoaded', function(){ 
    var v = document.getElementById('v'); 
    var canvas = document.getElementById('c'); 
    var context = canvas.getContext('2d'); 

    var cw = Math.floor(canvas.clientWidth/100); 
    var ch = Math.floor(canvas.clientHeight/100); 
    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); 
} 
} 

function drawLoop() { 
        requestAnimFrame(drawLoop); 
        //attempting to access values from canvasFunction() 
        //while inside of this loop 
        canvasFunction(); // does not work (/draw) 
       } 

어떤 도움이 많이 주시면 감사하겠습니다 : 여기에 코드입니다.

Answer 1

해결책은 canvasFunction 내부의 이벤트 리스너를 제거하는 것이 었습니다.

function canvasFunction(){ 
     var v = document.getElementById('v'); 
     var canvas = document.getElementById('c'); 
     var context = canvas.getContext('2d'); 
     var cw = Math.floor(canvas.clientWidth/100); 
     var ch = Math.floor(canvas.clientHeight/100); 
     canvas.width = cw; 
     canvas.height = ch; 
     draw(this,context,cw,ch); 

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

function drawLoop() { 
    requestAnimFrame(drawLoop); 
    requestAnimFrame(canvasFunction); 
}