Canvas JS: создание графики и обработка событий

Дополнительные примеры

1. Интерактивное рисование линий (белая доска)

Реализуем инструмент для рисования произвольных линий с помощью событий мыши.

<canvas id='draw' width='600' height='400' style='border:1px solid black'></canvas>
<script>
const canvas = document.getElementById('draw');
const ctx = canvas.getContext('2d');
let drawing = false;

canvas.addEventListener('mousedown', (e) => {
  drawing = true;
  ctx.beginPath();
  ctx.moveTo(e.offsetX, e.offsetY);
});

canvas.addEventListener('mousemove', (e) => {
  if (!drawing) return;
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.strokeStyle = 'blue';
  ctx.lineWidth = 3;
  ctx.stroke();
});

canvas.addEventListener('mouseup', () => drawing = false);
canvas.addEventListener('mouseleave', () => drawing = false);
</script>

Результат: при зажатой кнопке мыши на холсте рисуется синяя линия. При отпускании рисование прекращается.

2. Анимация системы частиц

Создадим множество маленьких шариков, движущихся по случайным траекториям.

<canvas id='particles' width='500' height='500'></canvas>
<script>
const canvas = document.getElementById('particles');
const ctx = canvas.getContext('2d');
const particles = [];
for (let i = 0; i < 100; i++) {
  particles.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    vx: (Math.random() - 0.5) * 2,
    vy: (Math.random() - 0.5) * 2,
    radius: Math.random() * 5 + 2,
    color: `hsl(${Math.random() * 360}, 80%, 60%)`
  });
}

function animateParticles() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach(p => {
    p.x += p.vx;
    p.y += p.vy;
    // отражение от границ
    if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
    if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
    ctx.fillStyle = p.color;
    ctx.fill();
  });
  requestAnimationFrame(animateParticles);
}
animateParticles();
</script>

Результат: 100 цветных частиц движутся внутри холста, отскакивая от краёв.

3. Обработка пикселей: сепия и размытие

Загружаем изображение и применяем эффект сепии через манипуляции с ImageData.

<canvas id='sepiaCanvas' width='400' height='300'></canvas>
<script>
const canvas = document.getElementById('sepiaCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'https://picsum.photos/400/300';
img.onload = () => {
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i+1];
    const b = data[i+2];
    data[i] = Math.min(255, (r * 0.393) + (g * 0.769) + (b * 0.189));
    data[i+1] = Math.min(255, (r * 0.349) + (g * 0.686) + (b * 0.168));
    data[i+2] = Math.min(255, (r * 0.272) + (g * 0.534) + (b * 0.131));
  }
  ctx.putImageData(imageData, 0, 0);
};
</script>

Результат: после загрузки изображения оно отображается в тонах сепии (коричневатый оттенок).