Question

当我点击“空格”时，下面的代码会显示画布。每次我点击“空格”然后它应该删除旧画布并绘制一个新画布（每次点击时选择6种不同的可能性）。

我遇到了代码问题，因为它不会删除旧画布并继续将它们绘制在另一个之上。我该如何解决这个问题？

<html>
  <head>
  </head>

  <link rel="stylesheet" href="cssFiles/blackBackground.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

  <canvas id="myCanvas" width="1260" height="1000" style="border:1px solid red;"></canvas>

    <script>

    var circle = [[-350,-300],[-350,0],[-350,300],[350,-300],[350,0],[350,300]];
    $(document).ready(function() {

        document.addEventListener("keydown", function (e) {


             if  (e.keyCode === 32) { // space is pressed

                var idx_circle = Math.floor(Math.random() * 6) 
                drawCircle(circle[idx_circle][0],circle[idx_circle][1],2.5,1);
              }    

        });
      })

     function drawCircle(centerX,centerY, scaleX, scaleY){

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var radius = 120;

  // save state
 context.save();

  // translate context
  context.translate(canvas.width/2 , canvas.height/2 );

  // draw circle which will be stretched into an oval
  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

  // restore to original state
  context.restore();

  // apply styling
  context.fillStyle = 'white';
  context.fill();
  context.lineWidth = 20;
  context.strokeStyle = 'white';
  context.stroke();
}


    </script>


  </body>
</html>

Answer 1

在绘制圆圈之前，您必须使用clearRect方法清除画布...

context.clearRect(0, 0, canvas.width, canvas.height);

var circle = [
     [-350, -300],
     [-350, 0],
     [-350, 300],
     [350, -300],
     [350, 0],
     [350, 300]
 ];

 document.addEventListener("keydown", function(e) {
     if (e.keyCode === 32) { // space is pressed
         var idx_circle = Math.floor(Math.random() * 6);
         drawCircle(circle[idx_circle][0], circle[idx_circle][1], 2.5, 1);
     }
 });

 function drawCircle(centerX, centerY, scaleX, scaleY) {
     var canvas = document.getElementById('myCanvas');
     var context = canvas.getContext('2d');
     var radius = 120;
     
     // clear canvas
     context.clearRect(0, 0, canvas.width, canvas.height);
     
     // save state
     context.save();
     
     // translate context
     context.translate(canvas.width / 2, canvas.height / 2);
     
     // draw circle which will be stretched into an oval
     context.beginPath();
     context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
     
     // apply styling
     context.fillStyle = 'red';
     context.fill();
     context.lineWidth = 20;
     context.strokeStyle = 'black';
     context.stroke();
     
     // restore to original state
     context.restore();
 }

<canvas id="myCanvas" width="1260" height="1000" style="border:1px solid red;"></canvas>

HTML keydown删除旧画布

1 个答案: