キャンバスにシェイプの後ろにトレイルを残すにはどうすればいいですか？

Question

今、私は、ユーザーがマウスホイールを回して、一定の時間が経過してゆっくりと消えるときに作成される図形を持っています。どのように私はそれに続く各形状の後ろにトレイルを生成し、またゆっくりと消えるだろうか？ここでは、コードがあります：

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

まあ、それは日曜日です。

1. はそれぞれ、言う、それらを呼び出して、コンストラクタ内の三角形のオブジェクトのプロパティにtrailsとalphaを空の配列と不透明度プロパティを追加します。ここで働く、それを行うための方法です。

2. トレイルに必要なゴーストトライアングルの最大数を定義します。私は3は良い値が見つかりました：

   var MAX_GHOSTS = 3; 
   

3. を三角形描画関数がその第2のパラメータとしてアルファチャネル値を取得し、機能自体から不透明度計算を削除します：三角形である

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

4. 現在（ループ内で）タイマーコールバックに描画され、drawTriangleへの呼び出しで使用された三角形のアルファ値を計算して更新します。選択した三角形のプロパティを三角形の軌跡の配列にプッシュします。コピーすると、x、yの位置が固定されます。すべてのタイマーコール・スペースさらに離れてゴースト押していない：既存の描画ループの前に、新しいダブルネストされたループ構造を追加し、バックタイマーコールでも

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

5. をどこ

   • 外ループは、三角形配列の各エントリの軌跡配列を取得します。トレイル配列の長さがMAX_GHOSTより大きい場合は、最初の要素を削除します（spliceを使用）。

   • 内側のループは、たとえばjをインデックスとして使用して、trails配列の次の要素を取得します（例：crumb）。それはすぐにフェードインし、それを描画するためにアルファ値を計算します。

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

はあなたをお楽しみください！