Question

问候每个人，我已经要求对这项任务提供一些帮助，但我得到的帮助却毫无结果。希望这次some1会帮助我:( ..

每次点击一个按钮，我都必须在id'd画布上画画，然而经过一些修改我得到了我的屏幕上的结果，但我失去了一些功能，解析整数不会工作，因为我收到错误：

 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>

Answer 1

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

“来自表单的parseInt”和“在start（）上清除画布”

1 个答案: