Как создать эффект дыма на Canvas?

@tristian_upton 

Для создания эффекта дыма на Canvas можно использовать алгоритмы, основанные на симуляции физики газов и жидкостей, такие как модель «Туманность». Этот подход включает в себя создание многочисленных частиц, которые перемещаются с определенной скоростью и позицией на холсте, создавая эффект движения дыма.

Также можно использовать более простые методы, такие как отрисовка случайных эллипсов разных размеров и прозрачностей, имитирующих внешний вид дыма. Более сложные эффекты можно создать, используя сложные gradient-заливки, эффекты растекания и маскированию элементов. Эти методы не будут точной симуляцией физического процесса, но они могут создать достаточно реалистичный эффект дыма.

Пример кода отрисовки эллипсов на Canvas:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function drawSmoke(x, y, radius, color) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fillStyle = color;
  ctx.fill();
}

for (var i = 0; i < 100; i++) {
  var x = Math.random() * canvas.width;
  var y = Math.random() * canvas.height;
  var radius = Math.random() * 50;
  var opacity = Math.random() * 0.4;
  drawSmoke(x, y, radius, 'rgba(255, 255, 255, ' + opacity + ')');
}

Этот код создаст 100 случайных эллипсов на холсте с рандомными размерами и прозрачностями, имитируя дым.