Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока
@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

86. Немного о CANVAS

В HTML5 появилась крутая вещь – элемент canvas. Кратко о сути элемента: создание картинки, то есть canvas – это холст для рисования средствами JavaScript. Мы, конечно, не будем подробно рассматривать рисование средствами JavaScript. Создадим элемент canvas и определим размера холста. Смотрим на пример первый.

Пример 1
<canvas id = "my_canvas" width = "200" height = "200">
<p>Ваш браузер не поддерживает canvas, а жаль.</p>
</canvas>

И давайте нарисуем что-нибудь. Смотрим второй пример.

Пример 2
<script>
/* находим наш холст */
var canvas = document.getElementById("my_canvas");
var ctx = canvas.getContext("2d");
/* рисуем */
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
</script>

На холсте появится красный квадрат.

Казалось бы, зачем использовать canvas, если можно в фотошопе спокойно нарисовать картинку. Благодаря canvas можно создавать динамические картинки (даже браузерные игры). Ранее использовался flash, для этих целей, теперь canvas. Например, графики, диаграммы и многое другое делают с использованием canvas.

Похожие уроки и записи блога

Основы объектно-ориентированного программирования (ООП) в PythonЗнакомство с Python
Написание модулей в PythonЗнакомство с Python
Работа с файлами в Python Знакомство с Python
Знакомимся с Flexbox в CSSЗнакомство с Flexbox
Свойство background для работы с фономЦвета и фон
Обработка исключений (try/except) в PythonЗнакомство с Python
Первое знакомство с PythonЗнакомство с Python
List/dict/set comprehensions (включения) в PythonЗнакомство с Python
Первая строка всех сайтов - DOCTYPEЗнакомство с HTML
<
×
>
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию и компьютерной безопасности. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Пентесту Active Directory, Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно