HTML keydown delete old canvas

Le code ci-dessous devrait faire apparaître une toile lorsque je clique sur "espace". Chaque fois que je clique sur "espace" alors il faut supprimer l'ancienne toile et en dessiner une nouvelle (la position est choisie parmi 6 possibilités différentes à chaque clic).HTML keydown delete old canvas

J'ai un problème avec le code car il ne supprime pas l'ancien canevas et continue à les dessiner les uns sur les autres. Comment puis-je résoudre le problème?

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

Source

2017-05-09 Gigi

Il faudrait effacer la toile en utilisant la méthode clearRect, avant de dessiner le cercle ...

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>

Source

2017-05-09 12:20:29

Merci, je l'avais essayé ça mais je l'utilisais au mauvais endroit! Suivi, comment puis-je faire une distinction entre la toile et le cercle que je dessine si je veux détecter un clic sur le cercle? – Gigi

Vous êtes les bienvenus! –

Terminé :) Comment puis-je faire une distinction entre la toile et le cercle que je dessine si je veux détecter un clic sur le cercle? – Gigi

HTML keydown delete old canvas

Répondre

Questions connexes