Как нарисовать анимированный фон на Canvas?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, '#1e90ff'); // Начальный цвет градиента
gradient.addColorStop(1, '#ffffff'); // Конечный цвет градиента

function drawBackground() {
  context.fillStyle = gradient;
  context.fillRect(0, 0, canvas.width, canvas.height);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var bgImage = new Image();
 bgImage.src = 'path/to/image';

 bgImage.onload = function() {
   function drawBackground() {
     var pattern = ctx.createPattern(bgImage, 'repeat');
     ctx.fillStyle = pattern;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
   }
   setInterval(drawBackground, 1000/60); // Каждые 16ms обновляем фон.
 };

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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

function Particle(x, y, radius, color) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.color = color;
  this.draw = function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  }
}

function generateParticles() {
  for (var i = 0; i < 50; i++) {
    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var radius = Math.random() * 5 + 1;
    var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')';
    particles.push(new Particle(x, y, radius, color))
  }
}

function drawBackground() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < particles.length; i++) {
    particles[i].x += Math.random() - 0.5;
    particles[i].y += Math.random() - 0.5;
    particles[i].draw();
  }
}

generateParticles();
setInterval(drawBackground, 1000/60); // Каждые 16ms обновляем фон.