Введение в Canvas [Модуль 12: SVG и Canvas]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

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

Список тем

Создание холста

id: 37916_canvas-nojs-1

Основная задача — создать на странице пустой холст. Это базовый прямоугольный контейнер. Используйте для этого специальный HTML-тег. С помощью CSS мы добавили рамку, чтобы вы могли его увидеть.

CSS

canvas {
  display: block;
  border: 2px solid #333;
  background-color: #f9f9f9;
}

                     <!-- Вставьте сюда тег, чтобы создать холст -->
<input1></input1>

HTML

<!-- Вставьте сюда тег, чтобы создать холст -->
<input1></input1>

Для создания холста используется тег `<canvas>`. Вам нужно вписать это имя тега в пропуск.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Установка размеров холста

id: 37916_canvas-nojs-2

По умолчанию холст имеет стандартный размер. Чтобы задать ему точные размеры области для рисования, используются HTML-атрибуты. Установите ширину (width) 300 и высоту (height) 200.

CSS

canvas {
  border: 2px solid #333;
  background-color: #f0f8ff;
}

                     <canvas input1="300" input2="200">
</canvas>

HTML

<canvas input1="300" input2="200">
</canvas>

Размеры холста задаются с помощью атрибутов `width` и `height` прямо в теге `<canvas>`. Значения указываются как числа, без 'px'. Например: `width="300"`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавление уникального идентификатора

id: 37916_canvas-nojs-3

Чтобы JavaScript мог найти этот конкретный холст и начать на нем рисовать, элементу нужен уникальный идентификатор. Добавьте холсту атрибут `id` со значением `mainArtboard`.

CSS

canvas {
  border: 1px dashed #666;
  background-color: #fff;
}

                     <canvas width="300" height="150" input1="mainArtboard"></canvas>

HTML

<canvas width="300" height="150" input1="mainArtboard"></canvas>

Используйте атрибут `id`. Его значением должна быть строка 'mainArtboard'. Этот шаг не изменит внешний вид холста, но он критически важен для его программирования.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Резервное содержимое

id: 37916_canvas-nojs-4

Некоторые очень старые браузеры не умеют работать с `<canvas>`. Для таких случаев можно указать резервный текст. Добавьте сообщение «Ваш браузер не поддерживает Canvas» внутрь тега. В вашем браузере оно не появится, но это хороший тон.

CSS

canvas {
  border: 2px solid #333;
  background-color: #f9f9f9;
}

                     <canvas width="300" height="150">
  input1
</canvas>

HTML

<canvas width="300" height="150">
  input1
</canvas>

Любой контент, который вы помещаете между открывающим тегом `<canvas>` и закрывающим `</canvas>`, будет показан только в том случае, если браузер не поддерживает этот элемент. Просто впишите нужный текст в пропуск.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Полная конфигурация холста

id: 37916_canvas-nojs-5

Пришло время собрать все вместе. Создайте элемент-холст, задайте ему идентификатор `my-scene`, ширину `320` и высоту `240`.

CSS

canvas {
  border: 3px double #000;
  background-color: #e6e6fa;
}

                     <input1 input2="my-scene" input3="320" input4="240"></input1>

HTML

<input1 input2="my-scene" input3="320" input4="240"></input1>

Вам нужно написать тег `<canvas>`, а внутри него указать три атрибута с соответствующими значениями: `id`, `width` и `height`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку