Question

var starNum = 20;
var starry = new Array(starNum);

for(var s = 0 ; s < 20 ; s++){
    starry[i] = new stars()
}

var starDraw = function() {
    var starCanvas = document.getElementById("stars");
    var starCtx = starCanvas.getContext("2d");

    starCtx.clearRect(0, 0, 1000, 900);

    for(i = 0; i < 20 ; i++){
        var star = starry[i];

        starCtx.fillStyle= "gold";
        starCtx.beginPath();

        // draw it
        starCtx.arc(star.x, star.y, star.radius,  Math.PI * 2, false);
        starCtx.stroke();
        starCtx.fill();
    }
}

function starFinish(){
    setInterval(starDraw, 10);
}

starFinish()

现在这里的主要问题是程序只会在应该吸引许多星星时使用星号。这是我的HTML代码。当我试图找到星[i]的x时，它告诉我它是未定义的。我在其他地方使用了这个代码的想法并且它有效，不知道这里出了什么问题。我需要很快解决这个问题。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>xdd</title>
  </head>
  <body>
    <canvas id="mycanvas" width="900" height="1000"
      style="position: absolute; left: 0; top: 0; z-index: 1"></canvas>
    <canvas id="stars" width="900" height="1000"
      style="position: absolute; left: 0; top: 0; z-index: 0; ; background-color:#000066"></canvas>

    <script src="Project.js"></script>
  </body>
</html>

Answer 1

Pacifier21 发现了你的代码中的错误，但是因为你有一些其他代码并不是所有CPU友好的我已经做了快速重写

// > Use const for variables that do not change 
// var starNum = 20; 
const starNum = 20;
// > Try to avoid using new Array and unless you wish to assign the array 
// declare it as a const
// var starry = new Array(starNum);
const starry = [];

// > Simple mistakes due to inconsistent code style. I use i in 99% of for loops
// then j,k not because they have any special meaning, but because it stops from
// doing this type of thing, which is often very hard to spot
//for(var s = 0 ; s < 20 ; s++){
for(var i = 0; i < starNum; i ++) { // You have the const starNum you should use it
    starry[i] = new stars()
}
// > The following two lines were in the function starDraw and are relatively slow
// in the great scheme of things. As neither canvas or context will change it
// is best to get them once. 
const starCanvas = document.getElementById("stars");
const starCtx = starCanvas.getContext("2d");

// > Use function statements rather than function expressions. function statements  
// are hoisted to the top of the current scope and are safer to use than 
// function expressions 
// var starDraw = function() {
function starDraw () {
    // > Removed following two lines
    // var starCanvas = document.getElementById("stars");
    // var starCtx = starCanvas.getContext("2d");

    // > Could also use canvas size saves you hunting down this line if the
    // canvas size is changed
    // starCtx.clearRect(0, 0, 1000, 900);
    starCtx.clearRect(0, 0, starCanvas.width, starCanvas.height);

    // > Using an undeclared variable, i is thus put in the global name space
    // and can be a source of very hard to track bugs.
    // for(i = 0; i < 20 ; i++){
    for(var i = 0; i < starNum; i++){
        var star = starry[i];
        starCtx.fillStyle= "gold";
        starCtx.beginPath();
        starCtx.arc(star.x, star.y, star.radius,  Math.PI * 2, false);

        // > You use stroke but don't set the stroke style ?
        starCtx.stroke();
        starCtx.fill();
    }
}

// > Never use setInterval for high frame rate animations
//function starFinish(){
//    setInterval(starDraw, 10);
//}

// > Use requestAnimation frame and an animation loop function
function mainLoop(){  // > This function will be called 60 times a second
                      // if the browser can maintain that rendering speed.
    starDraw(); // > draw the frame
    requestAnimationFrame(mainLoop); // > request next frame
}
// > This will start the animation
requestAnimationFrame(mainLoop);

// starFinish() // > Not needed

循环不会增加或数组被破坏

1 个答案: