Javascript FOR循環，「var i = 0」，循環按預期運行。然而變量被重置爲0，並且循環永遠不會結束

-1

的index.htmlJavascript FOR循環，「var i = 0」，循環按預期運行。然而變量被重置爲0，並且循環永遠不會結束

<!DOCTYPE html> 
<html lang="en" id="hypertext"> 
<head> 
    <meta charset="utf-8"> 
</head> 
<body onload="init();"> 
    <div id="Canvas_Container"> 
     <canvas id="Canvas_1"></canvas> 
    </div> 
</body> 
<script type="text/javascript" src="index.js"></script> 
</html>

index.js

var canvas_width = screen.availWidth; 
var canvas_height = screen.availHeight; 
var canvas_div = window.document.getElementById("Canvas_Container"); 
canvas_div.innerHTML = "<canvas id='Canvas_1' width='"+canvas_width+"' height='"+canvas_height+"'></canvas>"; 
var hypertext = document.getElementById("hypertext"); 
var canvas = document.getElementById("Canvas_1"); 
var context = canvas.getContext("2d"); 
var init = function() { 
    for (var i = 0; i <= 2; i++) { 
     var circle_x = Math.random() * canvas_width 
     var circle_y = Math.random() * canvas_height 
     var circle = { 
     "x": circle_x, 
     "y": circle_y, 
     "radius": 5, 
     "fill": "#000000" 
     } 
    } 
    if (canvas.getContext) { 
     context.beginPath(); 
     context.arc(circle.x,circle.y,circle.radius,0,2*Math.PI); 
     context.fillStyle = circle.fill; 
     context.fill(); 
     requestAnimationFrame(init); 
    } 
console.log(i) 
}

正如你可以看到我用HTML5畫布瞎搞。我更早地記錄了變量，並且我看到變量達到了由for循環設置的限制，然後出於某種奇怪的原因將其重置爲0，因此無限創建了圓，並且瀏覽器崩潰。我真的很撓腦袋，想知道這個有什麼問題。任何幫助，將不勝感激，我是這個整個JavaScript的東西很新。

來源

2016-08-22 user6744286

你覺得'requestAnimationFrame（init）''是做什麼的？ – Paulpro

你在'60fps'運行'init'函數。而且，對於日誌記錄，'i'變量記錄爲'3'，而不是'0'。 – Cristy

是啊，我現在覺得很傻。由於我不知道它做了什麼，我應該可能已經考慮過了。 – user6744286

您每次調用requestAnimationFrame時都重置for循環;

var init = function() { 
    for(var i = 0; i <= 2; i++) { 
     requestAnimationFrame(paint); 
    }  
} 

function paint() {  
    var circle_x = Math.random() * canvas_width 
    var circle_y = Math.random() * canvas_height 
    var circle = { 
     "x": circle_x, 
     "y": circle_y, 
     "radius": 5, 
     "fill": "#000000" 
    } 
    if (canvas.getContext) { 
     context.beginPath(); 
     context.arc(circle.x,circle.y,circle.radius,0,2*Math.PI); 
     context.fillStyle = circle.fill; 
     context.fill();   
    }  
}

來源

2016-08-22 15:52:33 EvilEpidemic

Javascript FOR循環，「var i = 0」，循環按預期運行。然而變量被重置爲0，並且循環永遠不會結束

回答

相關問題