HTML keydown 删除旧画布答案

【问题标题】：HTML keydown delete old canvasHTML keydown 删除旧画布
【发布时间】：2017-05-09 11:40:34
【问题描述】：

当我点击“空格”时，下面的代码应该会出现一个画布。每次我单击“空间”时，它都应该删除旧画布并绘制一个新画布（每次单击时从 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>

【问题讨论】：

标签： html canvas keydown

【解决方案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();
 }

&lt;canvas id="myCanvas" width="1260" height="1000" style="border:1px solid red;"&gt;&lt;/canvas&gt;

【讨论】：

谢谢，我试过了，但是我用错了地方！接下来，如果我想检测对圆圈的点击，如何区分画布和我正在绘制的圆圈？
完成 :) 接下来，如果我想检测对圆圈的点击，如何区分画布和正在绘制的圆圈？
嗯.. 不介意，但这是完全不同的问题。你应该问一个带有更多细节的新问题，而不是在评论部分提问:)