取决于html5 canvas和javascript的功能不起作用

Question

我只是在尝试做一个反应测试器游戏，每次用户点击形状都会出现一个圆形或矩形。 它应该会一直出现。 我的问题是，尽管负责使形状出现的功能首次起作用但以后不再起作用，形状只会出现一次，然后再也不会出现。 我能知道原因吗？

<!doctype html>
<html>
  <head>
    <title>Randomness Game</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <h1>Test Your Reactions</h1>
    <p>Click on boxes and circles as quickly as you can</p>
    <h3>Your time : <span id="takentime"></span></h3>
    <canvas id="myCanvas" width="3000px" height="600px" ></canvas>

    <script>
      var start = new Date().getTime();
      appearafterdelay();
      document.getElementById('myCanvas').onclick = function(){
          document.getElementById("myCanvas").style.display = "none";
          var end = new Date().getTime();
          var timetaken = (end - start)/1000 ;
          document.getElementById("takentime").innerHTML = timetaken + " seconds";
          appearafterdelay(); //this is not working again !!
      }

      //my functions
      //appearafterdelay function
      function appearafterdelay(){
          setTimeout(makerandomshape,Math.random()*1500);
      }

      //make shape appear functions
      function makerandomshape(){
          var randomnumb = Math.round(Math.random()); //random number to choose between 0 & 1 so between circle & rectangular
          if (randomnumb == 0){
              drawRectangular();
          }else{
              drawCircle();
          }
      }

      //draw rectangular functions
      function drawRectangular(){
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var centerx = Math.floor(Math.random()*300) + 400;
        var centery = Math.floor(Math.random()*300) + 110;
        var x = Math.floor(Math.random()*100) + 80 ;
        var y = Math.floor(Math.random()*100) + 80 ;
        ctx.fillStyle = getRandomColor();
        ctx.fillRect(centerx ,centery ,x ,y);
      }

      //draw circule function
      function drawCircle(){
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var centerx = Math.floor(Math.random()*300) + 400;
        var centery = Math.floor(Math.random()*300) + 110;
        var radius = Math.floor(Math.random()*100) + 80;
        ctx.beginPath();
        ctx.arc(centerx, centery, radius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fillStyle = getRandomColor();
        ctx.fill();
      }

      //draw colored circle & rectangular functions
      function getRandomColor(){
        var letters = "0123456789ABCDEF";
        var color = "#";
        for(var i = 0 ; i < 6 ; i ++){
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }
    </script>
  </body>
</html>

Answer 1

当您调用click事件时，它将使画布显示设置为无。 因此，请尝试以下代码。

<!doctype html>
<html>
  <head>
    <title>Randomness Game</title>

  </head>
  <body>
    <h1>Test Your Reactions</h1>
    <p>Click on boxes and circles as quickly as you can</p>
    <h3>Your time : <span id="takentime"></span></h3>
    <canvas id="myCanvas" width="3000px" height="600px" ></canvas>

    <script>
      var start = new Date().getTime();
      appearafterdelay();
      var canvas=document.getElementById('myCanvas');
      var context = canvas.getContext("2d");
      document.getElementById('myCanvas').onclick = function(){
          document.getElementById("myCanvas").style.display = "none";
          var end = new Date().getTime();
          var timetaken = (end - start)/1000 ;
          document.getElementById("takentime").innerHTML = timetaken + " seconds";
          document.getElementById("myCanvas").style.display = "block";
          context.clearRect(0, 0, canvas.width, canvas.height);
          appearafterdelay(); //this is not working again !!
      }

      //my functions
      //appearafterdelay function
      function appearafterdelay(){
          setTimeout(makerandomshape,Math.random()*1500);
      }

      //make shape appear functions
      function makerandomshape(){
          var randomnumb = Math.round(Math.random()); //random number to choose between 0 & 1 so between circle & rectangular
          if (randomnumb == 0){
              drawRectangular();
          }else{
              drawCircle();
          }
      }

      //draw rectangular functions
      function drawRectangular(){
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var centerx = Math.floor(Math.random()*300) + 400;
        var centery = Math.floor(Math.random()*300) + 110;
        var x = Math.floor(Math.random()*100) + 80 ;
        var y = Math.floor(Math.random()*100) + 80 ;
        ctx.fillStyle = getRandomColor();
        ctx.fillRect(centerx ,centery ,x ,y);
      }

      //draw circule function
      function drawCircle(){
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var centerx = Math.floor(Math.random()*300) + 400;
        var centery = Math.floor(Math.random()*300) + 110;
        var radius = Math.floor(Math.random()*100) + 80;
        ctx.beginPath();
        ctx.arc(centerx, centery, radius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fillStyle = getRandomColor();
        ctx.fill();
      }

      //draw colored circle & rectangular functions
      function getRandomColor(){
        var letters = "0123456789ABCDEF";
        var color = "#";
        for(var i = 0 ; i < 6 ; i ++){
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }
    </script>
  </body>
</html>

取决于html5 canvas和javascript的功能不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-02-14 05:35:14

取决于html5 canvas和javascript的功能不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-02-14 05:35:14

解决方案1
0 已采纳 2018-02-14 05:35:14