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刪除舊畫布

回答

相關問題