Wie lösche ich die Leinwand, aber halte die Füllung?

Im Moment funktioniert mein Code wie ich es möchte, aber als ich meinen Timer zum Neuzeichnen des Dreiecks erstellte, überlagerte es jedes Mal ein neues Dreieck. Um das zu beenden, setze ich clearRect ein, aber jetzt löscht es die gesamte Leinwand meine Fülle von Schwarz, die ich habe. Wie kann ich entweder einen neuen Timer hinzufügen, der immer noch den gleichen Effekt wie das Verschieben von Dreiecken bietet, aber nicht clearRect benötigt oder wie kann ich reparieren, was ich habe, um den Hintergrund der Leinwand schwarz zu halten, aber nicht jedes Mal neue Dreiecke zu überlagern? Jede Hilfe wird geschätzt!Wie lösche ich die Leinwand, aber halte die Füllung?

Edit: Ich habe auch versucht, zwei verschiedene Timer zusammen anstelle eines Timers für handle, bekam aber seltsame Ergebnisse mit der Geschwindigkeit der Dreiecke, weiß noch jemand, warum das ?: ist

timer = setInterval(init, 30); 
timer = setInterval(Triangle, 30);

Code:

<html> 
<head> 
<script> 
    var canvas; 
    var context; 
    var triangles = []; 
    function init() { 
     canvas = document.getElementById('canvas'); 
     context = canvas.getContext('2d'); 
     resizeCanvas(); 
     window.addEventListener('resize', resizeCanvas, false); 
     window.addEventListener('orientationchange', resizeCanvas, false); 
     canvas.onclick = function(event) { 
      handleClick(event.clientX, event.clientY); 
     }; 
     timer = setInterval(handleClick, 30); 
    } 
    function Triangle(x,y,color) { 
     this.x = x; 
     this.y = y; 
     this.color = color; 
     this.vx = Math.random() * 10 - 5; //5-3 
     this.vy = Math.random() * 10 - 5; 
     for (var i=0; i < triangles.length; i++) { 
      var t = triangles[i]; 
      t.x += t.vx; 
      t.y += t.vy; 
      if (t.x + t.vx > canvas.width || t.x + t.vx < 0) 
       t.vx = -t.vx; 
      if (t.y + t.vy > canvas.height || t.y + t.vy < 0) 
       t.vy = -t.vy; 
     } 
    } 
    function handleClick(x,y) { 
     context.clearRect(0,0, canvas.width,canvas.height); 
     var colors = ['red','green','purple','blue','yellow']; 
     var color = colors[Math.floor(Math.random()*colors.length)]; 
     triangles.push(new Triangle(x, y, color)); 
     for(i=0; i < triangles.length; i++) { 
      drawTriangle(triangles[i]); 
     } 
    } 
    function drawTriangle(triangle) { 
     context.beginPath(); 
     context.moveTo(triangle.x,triangle.y); 
     context.lineTo(triangle.x + 50,triangle.y + 50); 
     context.lineTo(triangle.x + 50,triangle.y - 50); 
     context.fillStyle = triangle.color; 
     context.fill(); 
    } 
    function resizeCanvas() { 
     canvas.width = window.innerWidth-10; 
     canvas.height = window.innerHeight-10; 
     fillBackgroundColor(); 
     for(i=0; i < triangles.length; i++) { 
      drawTriangle(triangles[i]); 
     } 
    } 
    function fillBackgroundColor() { 
     context.fillStyle = 'black'; 
     context.fillRect(0,0,canvas.width,canvas.height); 
    } 
    window.onload = init; 
</script> 
</head> 
<body> 
    <canvas id="canvas" width="500" height="500"> 
</body> 
</html>

Quelle

2016-11-28 joelboti

Obwohl ich nicht mit Canvas vertraut bin, denke ich, dass Sie eine 'redraw' Methode erstellen sollten, die zuerst die Leinwand löscht und dann alles zeichnet, was Sie wollen und wann immer Sie Änderungen vornehmen müssen Zeichnet die gesamte Leinwand neu. – Molda

Ich verbrachte ein paar Minuten lesen warf Ihren Code, und fand eine Sache, die mir auffiel. Um zu beginnen, wenn Sie die aufrufen, werden die Befehle von oben nach unten in der handleClick Funktion ausgeführt. Wenn wir uns diese Funktion ansehen, ist das erste, was Sie zeichnen, der schwarze Hintergrund. Dann stoßen Sie ein brandneues Dreieck aus. Anschließend zeichnen Sie alle Dreiecke im Array mit einer Schleife. Hier liegt das Problem. Sie zeichnen alle vorherigen Dreiecke, oben auf dem aufgefrischten schwarzen Rechteck.

Versuchen Sie, Ihren Code so einzustellen.

function handleClick(x,y) { 
     context.clearRect(0,0, canvas.width,canvas.height); 
     var colors = ['red','green','purple','blue','yellow']; 
     var color = colors[Math.floor(Math.random()*colors.length)]; 
     triangles.push(new Triangle(x, y, color)); 
     triangles.shift(); //This removes the first point in the array, and then shifts all other data points down one index. 
     for(i=0; i < triangles.length; i++) { 
      drawTriangle(triangles[i]); 
     } 
    }

Pleaase lassen Sie mich wissen, ob ich irgendwelche Ihren Code interpretiert verpassen, oder wenn Sie eine Frage folgen zu lassen.

Quelle

2016-11-28 22:49:43 bdkopen

Wie lösche ich die Leinwand, aber halte die Füllung?

Antwort

Verwandte Themen