HTML keydown删除旧画布

下面的代码应该会让画布出现在我点击“空间”时。每当我点击“空间”时，它应该删除旧的画布并绘制一个新的画布（每次点击时在6种不同的可能性中选择位置）。HTML keydown删除旧画布

我有一个代码的问题，因为它不会删除旧的画布，并不断绘制他们一个在另一个之上。我该如何解决这个问题？

<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>

来源

2017-05-09 Gigi

你不得不清除使用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>

来源

2017-05-09 12:20:29

谢谢你，我试过但我在错误的地方使用它！接下来，如果我想检测圆上的一个点击，我该如何区分画布和我正在绘制的圆圈？ – Gigi

不客气！ –

完成:)接下来，如果我想检测圆上的点击，我该如何区分画布和我绘制的圆圈？ – Gigi

HTML keydown删除旧画布

回答

相关问题