왜 HTML5에서 이미지가 너무 빠르게 새로 고침됩니까?

어떤 값을 지정하든 언제든지 최대한 빨리 새로 고침 할 것입니다.왜 HTML5에서 이미지가 너무 빠르게 새로 고침됩니까?

<!DOCTYPE html> 
<html> 
    <head> 
     <script> 
     var ctx, canvas; 



     window.requestAnimFrame = (function(callback) { 
      return window.requestAnimationFrame || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame || 
      window.msRequestAnimationFrame || 
      function(callback) { 
       window.setTimeout(callback, 1000/1); 
      }; 
     })(); 

      window.onload = function(){ 
       canvas = document.getElementById('myCanvas'); 
       ctx = canvas.getContext('2d'); 
       //sciana 
       drawLine(); 

      } 
      function drawLine(){ 
      var bok = 400, xw = canvas.width/2, yw = 10, odstep = 10; 
      var tX = 10/Math.sqrt(3); 
       ctx.save(); 
       for(var i = xw; i >= xw - bok/2; i-=tX){ 
        var r = Math.floor(255 * Math.random()); 
        var g = Math.floor(255 * Math.random()); 
        var b = Math.floor(255 * Math.random()); 
        ctx.translate(10/Math.sqrt(3), 10); 
        ctx.beginPath(); 
        ctx.fillStyle = "rgb("+r+","+g+","+b+")"; 
        ctx.arc(xw, 0, 6, 0, 2 * Math.PI, false); 
        ctx.fill(); 
        ctx.closePath(); 

       } 
       ctx.restore(); 
       ctx.save(); 
        for(var i = xw; i >= xw - bok/2; i-=10/Math.sqrt(3)){ 
        var r = Math.floor(255 * Math.random()); 
        var g = Math.floor(255 * Math.random()); 
        var b = Math.floor(255 * Math.random()); 
        ctx.translate(-10/Math.sqrt(3), 10); 
        ctx.beginPath(); 
        ctx.fillStyle = "rgb("+r+","+g+","+b+")"; 
        ctx.arc(xw, 0, 6, 0, 2 * Math.PI, false); 
        ctx.fill(); 
        ctx.closePath(); 
       } 
       ctx.restore(); 
       ctx.save(); 
       xw = xw - bok/2 ; 
       yw = bok*Math.sqrt(3)/2; 
       for(var i = xw; i <= xw + bok; i+=10){ 
        var r = Math.floor(255 * Math.random()); 
        var g = Math.floor(255 * Math.random()); 
        var b = Math.floor(255 * Math.random()); 
        ctx.translate(10,0); 
        ctx.beginPath(); 
        ctx.fillStyle = "rgb("+r+","+g+","+b+")"; 
        ctx.arc(xw, yw, 6, 0, 2 * Math.PI, false); 
        ctx.fill(); 
        ctx.closePath(); 
       } 
       ctx.restore(); 
       requestAnimFrame(drawLine);    
      } 
     </script> 
    </head> 
    <body> 
     <canvas id="myCanvas" width="600" height="600" style="background-color:#D0D0D0"> 
      Twoja przeglądarka nie obsługuje elementu Canvas. 
     </canvas> 
    </body> 
</html>

출처

2012-10-21 Yoda

시간이 걸릴하시기 바랍니다 .. 실행되지 얻을 않을 것이다 여전히 문제를 재현하는 가장 짧은 스 니펫으로 코드를 줄이려면 당신은 우리에게 많은 시간을 절약 할 것이며 그렇게함으로써 아마도 당신 스스로 문제를 해결할 것입니다. – meagar

설명을 읽지 않고서도 이해가되지 않으면 도움을받지 못할 수도 있습니다. 도움을받지 못하면 저리 비 쓰지 마십시오. – Yoda

그것은이 사이트의 작동 방식이 아닙니다. 우리의 피드백을 원하지 않는다면, 여기에 게시하지 않을 것입니다 *. 당신은 당신의 질문에 누가 응답하는지에 대한 말을하지 않습니다. 아무도 * 읽고 싶어하는 코드 벽을 포함하는 질문을 게시했습니다. 적절한 양의 코드가 포함 된 * 좋은 * 질문을 올리면 더 나은 답변을 얻을 수 있다고 제안합니다. – meagar

표현은 다음과 같이 작동하기 때문에 :

return true || false || function() { 
// do something 
};

자바 스크립트 사실 무언가를 찾을 때까지 왼쪽에서 오른쪽으로 이동 한 후 중단 때문에

기능은

출처

2012-10-21 14:31:20 tobspr

어떻게 해결할 수 있습니까? – Yoda

반환 (/ * 모든 requestFrame 등 여기 * /) && 함수 (콜백) {} – tobspr

가 작동합니다. 그러나 문제에 대한 코드를 최소화 할 수 있다면 도움이 될 것입니다 .. – tobspr

왜 HTML5에서 이미지가 너무 빠르게 새로 고침됩니까?

답변

관련 문제