隨着時間的推移，我如何讓畫布的形狀漸漸消失？

我有幾個不同的形狀（我只包含三角形的代碼，因爲它們都是相同的），當用戶旋轉鼠標滾輪時生成的，但我不知道如何使它們隨着時間消失這樣屏幕就不會很快被完全填滿。下面的代碼：隨着時間的推移，我如何讓畫布的形狀漸漸消失？

<html> 
<head> 
<script> 
    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; 
    } 

function handleClick(x,y) { 
     var colors = ['red','yellow','blue','purple','green']; 
     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); 
      context.fillStyle = triangle.triangleColor; 
      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 

      t.x += t.vx; 
      t.y += t.vy; 
     } 
} 

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"></canvas> 
</body> 
</html>

來源

2016-12-10 joelboti

應三角形的秒數之後淡出自動，或在一個時間，在那裏畫出的第一個是第一至消失應該有三角形的最大數目？ – haxxxton

他們應該在幾秒鐘後自動淡出 – joelboti

我加入的時間爲三角形對象的屬性：

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

和基於它的上的時間量不透明度：

function drawTriangle(triangle) { 
    ... 
    var c = triangle.triangleColor 
    context.fillStyle = 'rgba(' + c[0] + ', ' + c[1] + ', ' + c[2] + ', ' + (triangle.time/100) + ')';

一旦時間耗盡從表中刪除三角形：

function resizeCanvas() { 
    ... 
    if(t.time === 0) { 
     triangles.splice(i,1); 
    } 
}

另外，爲了更容易地使用RGBA值I轉換從一個字符串數組變量的顏色到其RGB值的陣列的陣列繪製形狀：

var colors = [[255,0,0],[255,255,0],[0,0,255],[128,0,128],[0,255,0]];

下面是實施方案的的jsfiddle ：

https://jsfiddle.net/3Lh1ydb2/1/

來源

2016-12-10 08:29:51

這很好，謝謝你！但是，有沒有一種方法使用這段代碼來使漸變漸變？這樣三角形保持穩定時間更長，然後漸漸消失得更快？ – joelboti

當然。可能有幾種方法。我用第一種方法更新了jsfiddle（通過以更大的時間開始三角形，更快地減少時間，並創建一個將時間轉換爲alpha值的函數）。這是一個馬虎，但它應該很容易調整您的需求。 –

隨着時間的推移，我如何讓畫布的形狀漸漸消失？

回答

相關問題