Wie hinterlasse ich eine Spur hinter meinen Formen in Leinwand?

Question

Im Moment habe ich Shapes, die erstellt werden, wenn der Benutzer das Mausrad dreht und nach einer gewissen Zeit langsam verblassen. Wie würde ich eine Spur hinter jeder Form erzeugen, die ihr folgt und auch langsam verschwindet? Hier ist der Code:

var canvas; 
 
    var context; 
 
    var triangles = []; 
 
    var timer; 
 

 
    function init() { 
 
     canvas = document.getElementById('canvas'); 
 
     context = canvas.getContext("2d"); 
 
     resizeCanvas(); 
 
     window.addEventListener('resize', resizeCanvas, false); 
 
     window.addEventListener('orientationchange', resizeCanvas, false); 
 
     canvas.onwheel = function(event) { 
 
     handleClick(event.clientX, event.clientY); 
 
     }; 
 
     var timer = setInterval(resizeCanvas, 30); 
 
    } 
 

 
    function Triangle(x, y, triangleColor) { 
 
     this.x = x; 
 
     this.y = y; 
 
     this.triangleColor = triangleColor; 
 

 
     this.vx = Math.random() * 30 - 15; 
 
     this.vy = Math.random() * 30 - 15; 
 
     this.time = 100; 
 
    } 
 

 
    function handleClick(x, y) { 
 
     var colors = [ 
 
     [0, 170, 255], 
 
     [230, 180, 125], 
 
     [50, 205, 130] 
 
     ]; 
 
     var triangleColor = colors[Math.floor(Math.random() * colors.length)]; 
 
     triangles.push(new Triangle(x, y, triangleColor)); 
 
     for (var i = 0; i < triangles.length; i++) { 
 
     drawTriangle(triangles[i]); 
 
     } 
 
    } 
 

 
    function drawTriangle(triangle) { 
 
     context.beginPath(); 
 
     context.moveTo(triangle.x, triangle.y); 
 
     context.lineTo(triangle.x + 25, triangle.y + 25); 
 
     context.lineTo(triangle.x + 25, triangle.y - 25); 
 
     var c = triangle.triangleColor 
 
     context.fillStyle = 'rgba(' + c[0] + ', ' + c[1] + ', ' + c[2] + ', ' + (triangle.time/100) + ')'; 
 
     context.fill(); 
 
    } 
 

 
    function resizeCanvas() { 
 
     canvas.width = window.innerWidth - 20; 
 
     canvas.height = window.innerHeight - 20; 
 
     fillBackgroundColor(); 
 
     for (var i = 0; i < triangles.length; i++) { 
 
     var t = triangles[i]; 
 
     drawTriangle(t); 
 

 
     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 
 
     if (t.time === 0) { 
 
      triangles.splice(i, 1); 
 
     } 
 

 
     t.time -= 1; 
 
     t.x += t.vx; 
 
     t.y += t.vy; 
 
     } 
 
    } 
 

 
    function fillBackgroundColor() { 
 
     context.fillStyle = "black"; 
 
     context.fillRect(0, 0, canvas.width, canvas.height); 
 
    } 
 

 

 
    init()

<canvas id="canvas" width="500" height="500"></canvas>

Answer 1

Nun, es ist Sonntag. Hier ist ein Weg, es zu tun, das funktioniert:

1. In ein leeres Array und Opazität Eigenschaft Dreieck Objekteigenschaften im Konstruktor, sie fordern, sagen wir, trails und alpha sind.

2. Definieren Sie die maximale Anzahl der gewünschten Geisterdreiecke in der Spur. Ich fand 3 einen guten Wert:

   var MAX_GHOSTS = 3; 
   

3. Stellen das Dreieck Zeichenfunktion einen Alphakanal-Wert als zweiten Parameter nehmen und Opazität Berechnung von innerhalb der Funktion selbst entfernen:

   function drawTriangle(triangle, alpha) { // two parameters required } 
   

4. Wo Dreiecke sind Derzeit im Timer-Callback (innerhalb der Schleife) gezeichnet, berechnen und aktualisieren Sie den Alpha-Wert des Dreiecks im Aufruf an drawTriangle verwendet. Drücken Sie eine Kopie der ausgewählten Dreieck Eigenschaften auf das Spuren-Array des Dreiecks: Kopieren friert die x, y-Position ein. Nicht drängen alle Timer Anruf Räume die Geisterbilder weiter auseinander:

   if(t.time%2 == 0) { 
        t.trails.push(
        { x: t.x, y: t.y, alpha: t.alpha, triangleColor: t.triangleColor} 
        ); 
       } 
   

5. Auch im Timer Rückruf, bevor die bestehende Zeichnung Schleife, fügen Sie eine neue Doppel-verschachtelte Schleifenstruktur, wo

   • die äußere Schleife ruft das Spurenarray jedes Eintrags in dem Dreieckenarray ab. Wenn die Länge des Trails-Arrays größer als MAX_GHOST ist, entfernen Sie das erste Element (mit splice).

   • Die innere Schleife, die beispielsweise j als Index verwendet, ruft die nächsten Elemente aus dem Trails-Array ab und nennt sie beispielsweise crumb. Berechnen Sie einen Alpha-Wert, um es schnell zu machen verblassen und ziehen es:

      drawTriangle(crumb, (j+1)/(MAX_GHOSTS + 2) * crumb.alpha); 
     

Hoffnung, die Sie genießen!