Javascript FORループ、 "var i = 0"、ループは期待どおりに実行されます。しかし、変数が0にリセットされ、そしてあなたは、私がHTML5のキャンバスをいじりだ見ることができるようにループが

-1

のindex.htmlJavascript FORループ、 "var i = 0"、ループは期待どおりに実行されます。しかし、変数が0にリセットされ、そしてあなたは、私がHTML5のキャンバスをいじりだ見ることができるようにループが

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

を終了することはありません。私は以前に変数を記録していましたが、変数がforループによって設定された限界に達していて、何らかの理由で0にリセットされていて、円が無限に作成されていてブラウザがクラッシュしていました。私は本当に頭が痛いし、何が悪いのか不思議です。どんな助けもありがたいです、私はこのJavaScript全体のことでかなり新しいです。

出典

2016-08-22 user6744286

「requestAnimationFrame（init）;」とは何ですか？ – Paulpro

'60fps'で' init'関数を実行します。そして、ロギングに関しては、 'i'変数は' 0'ではなく、 '3'として記録します。 – 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にリセットされ、そしてあなたは、私がHTML5のキャンバスをいじりだ見ることができるようにループが

答えて

関連する問題