Starry Sky in Html5 Canvas – Часть 1

В свободное время мне часто нравится создавать визуализации с использованием холста HTML5. Я планирую сделать небольшую презентацию об этом Поэтому я подумал, что хороший способ начать – создать сообщение в блоге, объясняющее, как сделать простой.

Этот урок научит вас, как создать что -то вроде изображения ниже с нуля!

Важно – Вы можете попробовать результат Эта часть учебника, посетив это CodeSandbox Анкет Тем не менее, я призываю вас прочитать сообщение в блоге и попытаться следовать, чтобы понять, как и почему он работает.

Во -первых, вам понадобится HTML -файл, давайте назовите его index.html :

Пока не безумно, просто несколько стилей и холст элемент.

Далее, давайте создадим файл JavaScript. Давайте назваем это index.js Анкет

const backgroundColor = "#030318";
const width = window.innerWidth;
const height = window.innerHeight;
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;

function render() {
  ctx.fillStyle = backgroundColor;
  ctx.fillRect(0, 0, width, height);
}
render();

В приведенном выше коде мы устанавливаем ширину и высоту холста, чтобы он занимал все окно. Затем в render () Функция, мы заполняем холст цветом фона. Если вы запустите его в своем браузере, это будет выглядеть так:

Ага. Не очень интересно. Давайте поставим там что -нибудь! Давайте добавим код в нашем index.js Файл, чтобы нарисовать несколько звезд.

Во -первых, давайте будем иметь функцию, которая создает звезды.

function createStars(width, height, spacing) {
  const stars = [];

  for (let x = 0; x < width; x += spacing) {
    for (let y = 0; y < height; y += spacing) {
      const star = {
        x: x,
        y: y
      };
      stars.push(star);
    }
  }
  return stars;
}

const stars = createStars(width, height, 30);

расстояние Параметр будет контролировать расстояние между звездами.

Тогда давайте обновим наш render () функция Так что это делает звезды.

function render() {
  ctx.fillStyle = backgroundColor;
  ctx.fillRect(0, 0, width, height);
  stars.forEach(function(star) {
    const x = star.x;
    const y = star.y;
    const r = 5;
    ctx.beginPath();
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.fill();
  });
}

Для наших целей звезда – это круг, поэтому мы можем использовать arc () функция Нарисовать наши звезды. Объяснение параметров:

• x и y используются для позиции.
• r используется для радиуса круга.
• 0 и Математика Pi * 2 являются началом и конечным углом соответственно. Полный круг уходит от 0 к 2PI Анкет

Строка ctx.fillstyle; используется для установки цвета круга на белый.

Посмотрим, что мы получаем сейчас:

Это определенно немного интереснее. Но это совсем не похоже на звездное небо! Звезды обычно не выглядят такими однородными и скучными. Нам нужно добавить некоторую случайность.

Давайте создадим функцию с именем случайный (макс) это вернет случайное число:

function randomInt(max) {
  return Math.floor(Math.random() * max);
}

Затем давайте используем эти случайные числа при создании наших звезд:

function createStars(width, height, spacing) {
  const stars = [];

  for (let x = 0; x < width; x += spacing) {
    for (let y = 0; y < height; y += spacing) {
      const star = {
        x: x + randomInt(spacing),
        y: y + randomInt(spacing)
      };
      stars.push(star);
    }
  }
  return stars;
}

Это выглядит уже почти реальным! Теперь давайте сделаем так, чтобы звезды были разными размерами. Для этого нам понадобится другой радиус для каждой звезды, поэтому мы добавим его в звездные объекты.

const maxStarRadius = 1.5;

function createStars(width, height, spacing) {
  const stars = [];

  for (let x = 0; x < width; x += spacing) {
    for (let y = 0; y < height; y += spacing) {
      const star = {
        x: x + randomInt(spacing),
        y: y + randomInt(spacing),
        r: Math.random() * maxStarRadius,
      };
      stars.push(star);
    }
  }
  return stars;
}

Тогда мы обновим render () функция Таким образом, он использует радиус звезды при рисунке. Пока мы находимся в этом, давайте также допустим логику рисунка круга в новую функцию.

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

function render() {
  ctx.fillStyle = backgroundColor;
  ctx.fillRect(0, 0, width, height);
  stars.forEach(function(star) {
    const x = star.x;
    const y = star.y;
    const r = star.r;
    fillCircle(ctx, x, y, r, "rgb(255, 255, 255)");
  });
}

Намного лучше! Теперь звезды все разные размеры!

Это все для части 1. Вы можете продолжить чтение, часть 2, где мы добавим луну и заставьте наши звезды мерцать!

Оригинал: “https://dev.to/kaeruct/starry-sky-in-html5-canvas-4e3o”