0

问候大家，我已经为这项任务寻求了一些帮助，但我得到的帮助是徒劳的..希望这次 some1 能帮助我:( ..

每次单击按钮时，我都必须在 id 的画布上绘制，但是经过一些修改后，我在屏幕上得到了结果，但我失去了一些功能，解析整数将无法工作，因为我收到错误：

 Uncaught ReferenceError: pGame is not defined

尽管它已被识别并且它曾经在早期阶段起作用。

另一个问题是每次单击开始时清除画布：

function start()
{
 //tried making a counter, if its the first time to click
 //start then do nothing else restore
 // context.restore();

 if (shouldClear==0) {


 setInterval(rotateShape, 30);
 var degrees = 0.0;

  shouldClear = 1;
 }
 else{
  rotateShape();
  shouldClear-1;
 }
 }

供参考，这里是我的完整代码：

 <!DOCTYPE HTML>
 <html>
 <head><title>Rectangles</title></head>
 <body>
 <script>

  var i = 0;
  var rectArrayStartX,rectArrayStartY,rectArrayDimY,   rectArrayDimX;

  var RotatingRectangle = function(x, y, width, height, rot, r,g,b){
    var rotation = rot;
    var rotationState = 0;
    this.draw = function(ctx){
      rotationState += rotation;

      ctx.save();
      ctx.translate(x+(width/2), y+(height/2));
      ctx.rotate(rotationState);
      var randomRed = Math.floor( Math.random() * 256 );
      var randomGreen = Math.floor( Math.random() * 256 );
      var randomBlue = Math.floor( Math.random() * 256 );
      ctx.fillStyle = "rgb(" + randomRed + ", " + randomGreen + ", " + randomBlue +")";
      ctx.fillRect(0-(width/2), 0-(height/2), width, height);
      ctx.restore();
    }
  } 

  var shouldClear = 0;
  function start()
   {
      //tried making a counter, if its the first time to click
      //start then do nothing else restore
     // context.restore();

      if (shouldClear==0) {


       setInterval(rotateShape, 30);
       var degrees = 0.0;

        shouldClear = 1;
      }
      else{
       rotateShape();
       shouldClear-1;
     }
     }

    function construct()
     {
      var count = 25;
       var count = parseInt(pGame.box.value);

      var allShapes = [];
      for (i=0; i < count; ++i) {
      var rotation = Math.random()*.10
      var x = Math.floor(Math.random() * 640);
      var y = Math.floor(Math.random() * 480);
      var randomRed = Math.floor( Math.random() * 256 );
      var randomGreen = Math.floor( Math.random() * 256 );
       var randomBlue = Math.floor( Math.random() * 256 );
      var rect = new RotatingRectangle(x, y, 50, 50, rotation, "rgb(" + randomRed + ", " + randomGreen + ", " + randomBlue +")");
      allShapes.push(rect); 
    }
    return allShapes;
     }

    var allShapes = construct();

   function rotateShape()
    {
     var canvas = document.getElementById('gameId');

      if (canvas.getContext) {
      var ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, 640, 480);
      for (i=0; i < allShapes.length; ++i) {
        allShapes[i].draw(ctx);
      }
      if (shouldClear==1) {
        var ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, 640, 480);
      for (i=0; i < allShapes.length; ++i) {
        allShapes[i].draw(ctx);
      }
    }

    }
    }


       </script>
     <div id="rectangles" STYLE = "background-color: #fff68f; width: 600px; height: 420px; 
           border-style: outset;position: absolute;">
       <form name="pGame">
       <center>
         <b>Canvas Application</b><br>
        <input type= "button" value= "Start" onclick= "start()" />
         <input id="box" type="text" size="2" value="10" style="border-style:inset;
             color:red; background-color: black" />
         </center>
         </form>

        <canvas id="gameId" width="598" height="300" 
        STYLE = "border:1px solid; background-color: #fff68f; position: absolute;">
       </canvas>

  </div>
  </body>
  </html>
4

1 回答 1

0

当您尝试访问该表单时，该表单pGame尚未创建。将您的脚本放在表单下，以便在执行脚本之前创建表单，或者在触发DOMContentLoaded事件时调用您的脚本。

于 2013-10-31T12:54:17.070 回答