HTML Keydown löschen alte Leinwand

Der folgende Code sollte eine Leinwand erscheinen, wenn ich auf "Leerzeichen" klicke. Jedes Mal, wenn ich auf "Space" klicke, sollte die alte Leinwand gelöscht und eine neue gezeichnet werden (die Position wird bei jedem Klick aus 6 verschiedenen Möglichkeiten ausgewählt).HTML Keydown löschen alte Leinwand

Ich habe ein Problem mit dem Code, weil es die alte Zeichenfläche nicht löscht und sie weiterhin übereinander zeichnet. Wie kann ich das Problem beheben?

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

Quelle

2017-05-09 Gigi

Sie haben würde die Leinwand mit clearRect Methode zu löschen, bevor der Kreis zeichnen ...

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>

Quelle

2017-05-09 12:20:29

Danke, hatte ich versucht, aber ich benutzte es an der falschen Stelle! Wie kann ich im Nachhinein zwischen der Leinwand und dem Kreis, den ich zeichne, unterscheiden, wenn ich einen Klick auf den Kreis erkennen möchte? – Gigi

Gern geschehen! –

Fertig :) Wie kann ich im Nachgang zwischen der Leinwand und dem Kreis, den ich zeichne, unterscheiden, wenn ich einen Klick auf den Kreis erkennen möchte? – Gigi

HTML Keydown löschen alte Leinwand

Antwort

Verwandte Themen