курсы JavaScript

Canvas введение ctx.moveTo / ctx.lineTo ()

Прокрутить вниз

Canvas

Курсы JavaScript это вторая ступень обучения после изучения HTML и CSS.  Давайте сначала вспомним что же такое JavaScript. Это язык, который необходим вам для выполнения сложных операций  на web странице. В случаях, когда на web странице происходит что-то большее, чем просто её статичное отображение — отображение периодически обновляемого контента, или интерактивных карт, или анимация 2D/3D графики, или прокрутка видео в проигрывателе, и т.д. — можете быть уверены, что скорее всего, не обошлось без JavaScript. Это третий слой слоёного пирога стандартных web технологий, два из которых HTML и CSS. 

  • HTML — это язык разметки, который мы используем для визуального и смыслового структурирования нашего web контента, например, определяем параграфы, заголовки, таблицы данных, или вставляем изображения и видео на страницу.
  • CSS — это язык стилей с помощью которого мы придаём стиль отображения нашего HTML контента, например придаём цвет фону (background) и шрифту, придаём контенту многоколоночный вид.
  • JavaScript — язык программирования, который позволяет вам создать динамически обновляемый контент, управляет мультимедиа, анимирует изображения.

    Курсы JavaScript помогут понять основные понятия и принципы программирования и алгоритмы.

И сегодня мы поговорим о элементе <canvas>, и для чего он используется. 

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

«Canvas»  в переводе с английского означает «холст».

Приложения от Mozilla поддерживают <canvas> начиная с Gecko 1.8 (т.е. с Firefox 1.5). Этот элемент первоначально был представлен Apple для OS X Dashboard и Safari. Internet Explorer поддерживает <canvas> начиная с 9 версии; для более ранних версий IE поддержку для <canvas> можно добавить с помощью скрипта из проекта Google’s Explorer Canvas. Google Chrome и Opera 9 также поддерживают <canvas>.

Элемент <canvas> также используется технологией WebGL для отрисовки аппаратно-ускоренной 3D-графики на веб-страницах.

Пример

Это простой пример использования CanvasRenderingContext2D.fillRect() метода.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

Отредактируйте код ниже, чтобы увидеть результат на холсте.

Мы напомнили вам про элемент <canvas>.  А проверить свои знания вы можете пройдя тест вверху страницы. Сертификат о прохождении вы можете обменять на подарки у администратора школы Gomother. Больше узнать о курсах программирования для детей вы можете связавшись с нами: 0965119907. Мы поможем определиться с направлением в зависимости от увлечений ребенка.