Как сделать фигуры из полотна исчезают и исчезают со временем?

У меня есть несколько разных форм (я только включил код для треугольника, так как они все одинаковы), которые генерируются, когда пользователь вращает колесо мыши, но я не могу понять, как заставить их исчезнуть с течением времени так что экран не просто полностью заполняется быстро. Вот код:Как сделать фигуры из полотна исчезают и исчезают со временем?

<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 я преобразовал цвета переменных из массива строк в массив массива их значений 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 первым методом, который пришел мне в голову (начиная с треугольников с большим временем, уменьшая время быстрее и создавая функцию для преобразования времени в альфа-значение). Это немного неряшливо, но его нужно легко настроить для ваших нужд. –

Как сделать фигуры из полотна исчезают и исчезают со временем?

ответ

Смежные вопросы