Question

每当我致电resizeWindow();

时，我的javascript程序似乎都会挂在浏览器中

该方法假设根据浏览器窗口的大小调整画布大小，但它永远不会起作用。

任何人都可以看到问题吗？

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Rostislav Myshkin COMP 4560 - Assignment 1</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0px;
      border: 0;
      overflow: hidden;
      /*  Disable scrollbars */
      display: block;
      /* No floating content on sides */
    }
  </style>
</head>

<body>

  <canvas id='c' style='position: absolute; left: 0px; top: 0px;'>
  </canvas>

  <script>
    (function () {
      var
        // Obtain a reference to the canvas element
        // using its id.
        windowCanvas = document.getElementById('c'),

        // Obtain a graphics context on the
        // canvas element for drawing.
        ctx = windowCanvas.getContext('2d');

      // *** You may want to define some other variables here... ***
      var x = 0;
      var backLeft, backRight, start, width, height;
      width = window.innerWidth;
      height = window.innerHeight;
      start = windowCanvas.width / 2;

      // Start listening to resize events and
      // draw canvas.
      initialize();

      function initialize() {
        // Register event listeners to
        // call the resizeWindow() function each time the window is resized,
        // and the toggle() function every time the user clicks on the window.
        //window.addEventListener('resize', resizeWindow, false);
        //window.addEventListener('click', toggle)

        // Draw background and squares for the first time.
        // ie, call the appropriate function(s) here.
        resizeWindow(); //PROBLEM HERE
      }


      function redraw() {
        console.log('inside redraw');
        // This function is called at initialization, and when the window is resized
        // *** Your code for drawing the squares goes here ***
        // Hints:
        // 0. "context.fillStyle='[colour]'" assigns a colour to a shape (you can use either the HTML code or the colour name)
        // 1. "context.fillRect(x, y, w, h)" creates a rectangle with top left corner at (x,y), width w, and height h.
        // 2. The height of your window is window.innerHeight, and its width is window.innerWidth.
        backLeft = ctx.fillStyle = "#FFFFFF";
        backLeft = ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
        backRight = ctx.fillStyle = "#000000";
        backRight = ctx.fillRect(start, 0, window.innerWidth, window.innerHeight);

        while (x < windowCanvas.height) {
          if (x < windowCanvas.width / 2) {
            var y = 0;
            while (y < windowCanvas.height - 10) {
              ctx.beginPath();
              ctx.fillStyle = "#77f442";
              ctx.fillRect(x + 30, y + 10, 20, 20);
              ctx.stroke();
              y = y + 50;
            }
            x = x + 50;
            console.log('inside the if');
          }
          else if (x == windowCanvas.width / 2) {
            while ((x >= (windowCanvas.width / 2)) && (x < windowCanvas.width)) {
              var y = 0;
              while ((y <= (windowCanvas.height - 10))) {
                ctx.beginPath();
                ctx.fillStyle = "#77f442";
                ctx.fillRect(x, y + 10, 20, 20);
                ctx.stroke();
                y = y + 50;
              }
              x = x + 50;
            }
            console.log('y: ' + y);
          }
        }
        // var border = 20;
        // var xHalf = windowCanvas.width /2;
        // var y = border;
        //
        // while(xHalf + (30) < windowCanvas.width - border)
        // {
        //   while((y + 30) < windowCanvas.height - border)
        //   {
        //     ctx.beginPath();
        //     ctx.fillStyle = "#77f442";
        //     ctx.fillRect(x + 30, y + 10, 20, 20);
        //     ctx.stroke();
        //
        //     ctx.beginPath();
        //     ctx.fillStyle = "#77f442";
        //     ctx.fillRect(x - 30 , y  - 10, 20, 20);
        //     ctx.stroke();
        //   }
        //   y = y + 50;
        // }
        // x = x + 50;

      }

      function resizeWindow()
      // Runs each time the window is resized.
      // Resets the canvas dimensions to match window, then redraws the background and squares.
      {
        windowCanvas.width = window.innerWidth;
        windowCanvas.height = window.innerHeight;
        redraw();
      }

      function toggle() {
        // This function is called when the user clicks on the window.
        var check = true;
        if (check == false) {
          backLeft = ctx.fillStyle = "#FFFFFF";
          backLeft = ctx.fillRect(0, 0, start, height);
          backRight = ctx.fillStyle = "#000000";
          backRight = ctx.fillRect(start, 0, start, height);
          check = true;
        }
        else {
          backLeft = ctx.fillStyle = "#000000";
          backLeft = ctx.fillRect(0, 0, start, height);
          backRight = ctx.fillStyle = "#FFFFFF";
          backRight = ctx.fillRect(start, 0, start, height);
          check = false;
        }
        check = false;
      }

    })();
  </script>

</body>

</html>

Javascript canvas - 调用resizeWindow（）时程序挂起

0 个答案: