Мастерство в HTML-графике canvas

Введение

HTML-тег <canvas> используется для рисования графики и других визуальных элементов на веб-странице. Этот тег предоставляет платформу для разработчиков для создания игр, изображений и анимаций с использованием JavaScript. Элемент canvas обладает различными атрибутами, которые позволяют управлять размером, непрозрачностью и внешним видом canvas.

В этом практическом занятии мы изучим, как использовать тег <canvas> в HTML для создания графики, добавления анимации и манипулирования формами и текстом с использованием JavaScript.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70719{{"HTML-рисунок"}} html/head_elems -.-> lab-70719{{"HTML-рисунок"}} html/layout -.-> lab-70719{{"HTML-рисунок"}} html/doc_flow -.-> lab-70719{{"HTML-рисунок"}} html/multimedia -.-> lab-70719{{"HTML-рисунок"}} html/embed_media -.-> lab-70719{{"HTML-рисунок"}} html/inter_elems -.-> lab-70719{{"HTML-рисунок"}} end

Создание простого canvas

Создадим простой canvas с использованием тега <canvas> без какого-либо содержимого. В файле index.html напишите следующий код:

<!doctype html>
<html>
  <head>
    <title>Simple Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>

Сохраните файл и откройте его в браузере. Вы заметите пустое место на странице, которое представляет собой наш canvas с начальными размерами шириной 300px и высотой 150px.

Добавление стилей к canvas

Мы можем добавить стили к нашему canvas с использованием атрибута style. Добавим границу к нашему canvas, чтобы его границы были видимы.

<!doctype html>
<html>
  <head>
    <title>Styled Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
  </body>
</html>

Сохраните файл и обновите браузер, чтобы увидеть результат.

Создание форм на canvas

Теперь добавим в наш canvas несколько графики. Для этого нам понадобится использовать JavaScript. Мы можем использовать метод getContext(), чтобы получить 2D контекст рисования нашего canvas и выполнять различные операции с ним.

<!doctype html>
<html>
  <head>
    <title>Shapes on Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // Draw a rectangle
      ctx.fillStyle = "red";
      ctx.fillRect(50, 50, 100, 50);
    </script>
  </body>
</html>

В приведенном выше коде мы сначала получаем элемент canvas по его идентификатору myCanvas, а затем получаем 2D контекст рисования с использованием getContext(). Затем мы устанавливаем свойство fillStyle в "red", чтобы заполнить прямоугольник красным цветом. Наконец, мы рисуем прямоугольник с использованием метода fillRect().

Сохраните файл и обновите браузер, чтобы увидеть результат.

Добавление текста на canvas

Добавим некоторый текст на наш canvas с использованием JavaScript.

<!doctype html>
<html>
  <head>
    <title>Text on Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // Add text
      ctx.font = "30px Arial";
      ctx.fillStyle = "blue";
      ctx.fillText("Hello World", 50, 100);
    </script>
  </body>
</html>

В приведенном выше коде мы сначала получаем элемент canvas по его идентификатору myCanvas, а затем получаем 2D контекст рисования с использованием getContext(). Затем мы устанавливаем свойство font в "30px Arial" и свойство fillStyle в "blue". Наконец, мы добавляем текст "Hello World" с использованием метода fillText().

Сохраните файл и обновите браузер, чтобы увидеть результат.

Анимация графики на canvas

Мы также можем создавать анимации на canvas с использованием JavaScript и HTML-тега <canvas>. Создадим анимацию движущегося прямоугольника на нашем canvas.

<!doctype html>
<html>
  <head>
    <title>Animated Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      let x = 20;
      let y = 20;
      const dx = 5;

      function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "red";
        ctx.fillRect(x, y, 50, 50);

        if (x + 50 > canvas.width || x < 0) {
          dx = -dx;
        }

        x += dx;
      }

      animate();
    </script>
  </body>
</html>

В приведенном выше коде мы сначала получаем элемент canvas по его идентификатору myCanvas, а затем получаем 2D контекст рисования с использованием getContext(). Затем мы объявляем несколько переменных x и y, чтобы хранить позицию нашего прямоугольника. Мы также объявляем переменную dx, чтобы двигать прямоугольник по оси x.

Затем мы создаем функцию animate(), чтобы нарисовать прямоугольник на экране. Мы используем метод clearRect(), чтобы очистить предыдущие рисунки на canvas на каждом кадре. Затем мы заполняем прямоугольник красным цветом с использованием метода fillRect().

Затем мы проверяем, достиг ли прямоугольник границ canvas, и если да, то меняем направление движения, изменив значение dx.

Наконец, мы вызываем метод requestAnimationFrame(), чтобы создать цикл для анимации.

Сохраните файл и обновите браузер, чтобы увидеть анимированный прямоугольник.

Резюме

В этом практическом занятии мы узнали, как использовать HTML-тег <canvas> для создания графики и анимаций на веб-странице. Мы также узнали, как манипулировать размером, непрозрачностью и внешним видом canvas с использованием атрибутов и стилей. Мы добавили на canvas формы, текст и анимации с использованием JavaScript и метода getContext().