Canvas как работать
Перейти к содержимому

Canvas как работать

  • автор:

Руководство по Canvas

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

В этом руководстве описываются основы использования элемента для рисования 2D-графики. Приведённые примеры дадут вам понимание того, что вы можете сделать с помощью , а использованные в статье фрагменты кода помогут в создании собственных проектов.

Впервые использовался компанией Apple для создания Mac OS X Dashboard, а затем был реализован в Web-браузерах. На сегодняшний день все основные браузеры поддерживают работу с . Тег часть спецификации WhatWG Web applications 1.0 также известной как HTML5.

Прежде чем начать

Работа с элементом довольно проста, но потребует от вас базовых знаний HTML и JavaScript. Следует предупредить о том, что элемент не работает в некоторых старых браузерах, но поддерживается большинством современных браузеров. Стандартный размер 300px × 150px (ширина × высота), однако эти размеры могут быть изменены при помощи HTML-атрибутов height и width . Для рисования графики мы будем использовать javascript context object , который создаёт графику динамически.

В этом руководстве

  • Базовое использование
  • Рисование форм (en-US)
  • Использование изображений (en-US)
  • Применение стилей и цветов (en-US)
  • Трансформации (en-US)
  • Композирование и обрезка (en-US)
  • Базовое анимирование (en-US)
  • Оптимизация canvas (en-US)

Смотрите Также

  • Canvas topic page
  • Drawing Graphics with Canvas (en-US)
  • Canvas examples
  • HTML5 Tutorial
  • Drawing Text Using a Canvas (en-US)
  • Adding Text to Canvas
  • Canvas Drawing and Animation Application
  • Interactive canvas tutorial
  • HTML5CanvasTutorials
  • How to draw N grade Bézier curves with the Canvas API
  • W3C Standard

Примечание для помощников

Из-за досадной технической ошибки, которая произошла 17 июня 2013 года, мы утеряли историю по этому руководству, в том числе атрибуции ко всем прошлым, участвовавшие в его создании. Мы приносим извинения за это, и надеемся, что вы простите нас за этот несчастный случай.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Основные приемы работы с Canvas [Part 1]

Привет! Сегодня я хотел бы начать цикл статей на тему того, как работать с canvas в HTML5 и как применять знания в области матанализа для реализации необычных и интересных эффектов.

Все навыки и умения, которые мы получим здесь, являются фундаментальными принципами и могут быть использованы для создания различных эффектов в играх и приложениях.

Сегодня мы рассмотрим, как рисовать различные фигуры, и реализуем алгоритм fibonacci flower, также известный как golden ratio или phyllotaxis.

Подготовительные аспекты

Для начала создадим пустой html документ, добавим в него canvas с и пропишем немного стилей:

#canvas

Далее получим ссылку на созданый элемент:

const canvas = document.getElementById("canvas");

Для начала мы будем рассматривать принципы canvas api, webgl api рассмотрим в рамках других статей. Для того, чтобы использовать canvas api, необходимо обратиться к интерфейсу CanvasRenderingContext2D, для этого создадим новую переменную context:

const ctx = canvas.getContext('2d');

А также установим высоту и ширину canvas, равную высоте и ширине окна браузера:

canvas.width = window.innerWidth; canvas.height = window.innerHeight;

На этом подготовительные аспекты закончены, и можно приступать к непосредственно работе с графикой.

Arc

Arc метод — один из самых базовых методов canvas api и используется для рисования окружностей, а также кривых линий. Метод принимает следующие аргументы:
x
Горизонтальная координата центра дуги
y
Вертикальная координата центра дуги
radius
Радиус дуги
startAngle
Угол начала дуги в радианах
endAngle
Угол конца дуги в радианах

Сначала давайте нарисуем окружность. Для этого вызовем метод beginPath(), а после — метод arc следующим образом:

ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); ctx.closePath(); ctx.stroke();

Таким образом можно получить окружность.

fillRect

Также мы можем нарисовать прямоугольник используя метод fillRect, который принимает следующие параметры:
x
Координата начальной точки прямоугольника по оси X
y
Координата начальной точки прямоугольника по оси Y
width
Ширина прямоугольника
height
Высота прямоуголника

ctx.fillRect(0, 0, 100, 200);

Анимация

Анимация в мире canvas — всего-навсего цикличная перерисовка, которая создает иллюзию движения. А как же можно создать цикличную перерисовку? Для этого создадим функцию animate и внутри данной функции вызовем метод requestAnimationFrame, передав в него ссылку на созданную функцию. Таким образом функция animate будет перевызываться вновь и вновь до тех пор, пока мы не остановим анимацию:

function animate()

Поместим код для рисования окружности во внутрь функции animate и вызовем ее:

function animate() < ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); ctx.closePath(); ctx.stroke(); window.requestAnimationFrame(animate); >animate();

Как мы видим, анимация статична. Для того, чтобы проверить, что все работает корректно, создадим переменную radius и будем использовать ее в качестве аргумента метода arc:

function animate() < size += 0.01; // . ctx.arc(100, 100, size, 0, Math.PI * 2); // . >

Также мы можем заставить двигаться нашу окружность, изменяя, например, параметр x метода arc:

function animate() < size += 0.01; positionX += 0.1; // . ctx.arc(positionX, 100, size, 0, Math.PI * 2); // . >

Однако, как можно заметить, мы будем видеть шлейф, идущий за окружностью. Это происходит потому, что мы видим элементы предыдущих фреймов. Для того, чтобы избавиться от данного поведения, можно использовать метод clearRect, который принимает такие же аргументы, как и метод fillRect. В данном случае мы хотим полностью обновить canvas, поэтому вызовем метод следующим образом:

ctx.clearRect(0, 0, canvas.width, canvas.height);

Fibonacci flower

Перед тем, как мы рассмотрим принцип реализации данного алгоритма, давайте немного отрефакторим методы анимации. Для этого весь код, который отвечает за рисование на canvas, вынесем в функцию draw. Далее определимся с основными терминами. В основе алгоритма fibonacci flower лежит приницип движения окружности по круговой траектории. Исходя из определения кругового движения, нам необходимо будет считать X как , а Y как

Это работает потому, что sin и cos математически связаны с единичной окружностью. Таким образом получим следующий код:

function draw() < let positionX = 0; let positionY = 0; let angle = 0; let radius = 0; ctx.beginPath(); ctx.arc(positionX, positionY, 20, 0, Math.PI * 2); ctx.closePath(); ctx.stroke(); >function animate() < draw(); window.requestAnimationFrame(animate); >animate();

Далее заведем переменный count и scale, в которых будем хранить количество окружностей (частиц) и коэффициент для расчета радиуса соответственно. Таким образом, код примет вид:

let count = 0; let scale = 10; function draw() < let angle = count; let radius = scale * Math.sqrt(count); let positionX = radius * Math.sin(angle); let positionY = radius * Math.cos(angle); // . count++; >

Здесь мы на каждой итерации изменяем переменную count, которая увеличивает значение radius, а также positionX и positionY, но чтобы это не происходило слишком быстро, будем использовать квадратный корень от count. Дело за малым, расположить fibonacci flower по центру экрана. Для этого прибавим к positionX и positionY canvas.width / 2 и canvas.height / 2 соответственно.

Меняя коэффициент перед count можно добиться различных результатов, таких как ниже:

Коэффициент = 1Коэффициент = 2Коэффициент = 10

Чтобы изменить поведение отрисовки, можно изменить параметр globalCompositeOperation на значение destination-over, тогда новые фреймы будут рисоваться под уже отрисованными, что даст вполне интересный эффект:

Коэффициент = 0.6Коэффициент = 0.3

Финальный листинг будет выглядеть так:

const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx.globalCompositeOperation = "destination-over"; let count = 0; let scale = 10; function draw() < let angle = count * 0.1; let radius = scale * Math.sqrt(count); let positionX = radius * Math.sin(angle) + canvas.width / 2; let positionY = radius * Math.cos(angle) + canvas.height / 2; ctx.fillStyle = "#F24949"; ctx.strokeStyle = "#8B428C"; ctx.beginPath(); ctx.arc(positionX, positionY, 20, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); ctx.stroke(); count++; >function animate() < draw(); if (count >1000) return; window.requestAnimationFrame(animate); > animate();

В дальнейших статьях мы рассмотрим другие, не менее интересные приемы работы с canvas api и webgl. До скорых встреч!

Глубокое погружение в Canvas

Вы читаете экспериментальную электронную книгу. Она создана, чтобы продемонстрировать возможности современных веб-стандартов с интерактивными электронными текстами. Всё, что вы видите, сделано на HTML, CSS, Javascript и собрано в книгу с помощью инструментов с открытым исходным кодом. Читайте, прокручивая вниз каждую главу или воспользуйтесь навигацией внизу экрана.

Эта книгу я называю «когда-нибудь» — мой термин для книги, которая завершена, но будет обновляться. Если вы нашли ошибку или хотите, чтобы я описал новую функцию, пожалуйста, дайте мне знать через мой блог или Twitter.

HTML Canvas — это удивительная технология для рисования, встроенная во все современные браузеры. С помощью Canvas вы можете рисовать фигуры, управлять фотографиями, создавать игры и анимировать фактически что угодно — всё это с правильными веб-стандартами. Вы даже можете делать мобильные приложения.

Эта книга является практическим знакомством с Canvas. Пишите код вместе с книгой и играйте с интерактивными примерами. Когда вы закончите читать этот небольшой труд, то получите навыки для создания графиков, эффектов, диаграмм и игр, которые интегрированы в содержимое веб-страницы.

Эта книга состоит из двух видов разделов. Есть часть для чтения, где я описываю как работает API и даю вам интерактивные примеры. Также есть практические уроки для самостоятельного прохождения и создания своего собственного приложения. Код в этих разделах доступен для загрузки на ваш компьютер. С позиции навыков вы должны знать только некоторые основы JavaScript и HTML. Всё, что потребуется на вашем компьютере — это копия Chrome или Safari и любимый текстовый редактор. Canvas очень прост для работы и не требует IDE.

Посмотреть оригинал книги и скачать примеры к ней вы можете по ссылке:

  • Основы рисования
  • Практика: создание диаграмм
  • Продвинутое рисование и события
  • Анимация
  • Создание игры
  • Буферы пикселей и другие эффекты
  • 3D-графика через WebGL и ThreeJS
  • WebGL-практикум с ThreeJS: 3D автомобиль
  • Введение в WebAudio
  • Доступ к веб-камере через getUserMedia()
  • Реальные примеры и инструменты
  • Мобильные устройства и оптимизация производительности

Создание и публикация документов HTML5 Canvas в Animate

Canvas — это новый элемент в HTML5, который предоставляет API-интерфейс, обеспечивающий возможность динамического создания и визуализации графики, диаграмм, изображений и анимации. Элемент Canvas API дополняет преимущества платформы HTML5 функциями отрисовки двумерной графики. Эти функции поддерживаются в большинстве современных операционных систем и браузеров.

По существу, Canvas — это процессор для визуализации растровых изображений. Полученные рисунки являются окончательными, их размер нельзя изменить. Более того, объекты, отрисованные с помощью Canvas, не являются частью DOM-модели веб-страницы.

Элемент Canvas может быть добавлен на веб-страницу с помощью тега . Такие элементы затем могут быть расширены с помощью JavaScript, чтобы придать им интерактивность. Дополнительные сведения см. на этой странице.

Новый тип документа HTML5 Canvas

Animate позволяет создавать документы HTML5 Canvas с обилием изображений, графики, анимаций и т. д. Новый тип документа (HTML5 Canvas) добавлен в Animate, и теперь обеспечивается встроенная поддержка для создания расширенного и интерактивного содержимого HTML5. Это означает, что можно использовать традиционную временную шкалу, рабочую среду и инструменты Animate для создания содержимого, а затем выводить его в формате HTML5. Всего несколько щелчков мыши — и все готово к созданию и формированию полнофункционального документа HTML5 Canvas. Для формирования такого файла HTML5 в Animate имеются заранее установленные параметры документа и публикации.

Animate интегрирован с библиотеками CreateJS, предназначенными для создания богатого интерактивного содержимого в технологиях Open Web посредством HTML5. Animate генерирует HTML и JavaScript для содержимого (включая растровые, векторные изображения, фигуры, звуки, анимации движения и т. д.), созданного в рабочей области. Полученный файл можно запустить на любом устройстве или браузере, которые поддерживают HTML5 Canvas.

Animate и Canvas API

Animate публикует данные в формат HTML5, пользуясь API-интерфейсом Canvas. Animate преобразует объекты, созданные в рабочей области, в их точные аналоги в элементе Canvas. Каждая функция Animate сопоставлена с конкретным API элемента Canvas, поэтому Animate позволяет публиковать в формат HTML5 даже сложное содержимое.

Создание документа HTML5 Canvas

Для создания документа HTML5 Canvas выполните следующие действия:

  1. Выберите пункт меню Файл >Создать для вывода окна «Новый документ». Щелкните вкладку Дополнительно в верхней части экрана и выберите параметр HTML5 Canvas. При этом будет открыт новый FLA-файл, параметры публикации которого уже изменены под формат HTML5.

Теперь можно создавать содержимое HTML5 с помощью инструментов в Animate. Приступая к работе с документом HTML5 Canvas, вы заметите, что определенные функции и инструменты не поддерживаются и отключены. Это объясняется тем, что Animate поддерживает только те возможности, которые предоставляются элементом Canvas в HTML5. Например, не поддерживаются 3D-преобразования, пунктирные линии, эффекты фаски.

Добавление интерактивности в документ HTML5 Canvas

Animate публикует содержимое HTML5 с использованием библиотек CreateJS. CreateJS — это набор модульных библиотек, которые позволяют использовать расширенное интерактивное содержимое на базе открытых веб-технологий посредством HTML5. Набор CreateJS включает библиотеки EaselJS, TweenJS, SoundJS и PreloadJS. CreateJS преобразует содержимое, созданное в рабочей области, в HTML5 с использованием этих отдельных библиотек для получения файлов вывода в формате HTML и JavaScript. Также можно обрабатывать этот файл JavaScript с целью улучшения содержимого.

Однако Animate позволяет реализовать интерактивность объектов на рабочей области, созданные для HTML5 Canvas в самом приложении. Это означает, что код JavaScript можно добавлять в отдельные объекты на рабочей области прямо в Animate и просматривать их в процессе разработки. В свою очередь, Animate предоставляет встроенную поддержку для JavaScript вместе с полезными функциями в редакторе кода, которые позволяют повысить производительность рабочего процесса программистов.

Можно выбрать отдельные кадры и ключевые кадры на временной шкале и добавить интерактивные элементы в содержимое. В документы HTML5 Canvas интерактивность можно добавить с помощью JavaScript. Дополнительные сведения о создании кода JavaScript см. на этой странице.

Код JavaScript можно составить непосредственно на панели «Действия»: она поддерживает следующие функции при работе с кодом JavaScript:

Эта функция позволяет быстро вставлять и редактировать код JavaScript без ошибок. По мере ввода символов на панели «Действия» может отображаться список кандидатов на возможное дополнение вводимого текста.

Кроме того, Animate обеспечивает возможность использования некоторых функции с панели «Действия» при работе с HTML5 Canvas. Эти функции позволяют повысить производительность рабочего процесса при добавлении интерактивности в объекты на рабочей области. Они перечислены ниже.

Код отображается с использованием разных шрифтов или цветов в соответствии с синтаксисом. Эта функция позволяет писать код с опорой на структуру, позволяя визуально отличить правильный код и легко находить ошибки синтаксиса.

Цветовое оформление кода

Код отображается с использованием разных цветов в соответствии с синтаксисом. Это позволяет визуально различать различные части синтаксиса.

Автоматически добавляются закрывающие квадратные и круглые скобки при написании кода JavaScript.

С помощью JavaScript можно добавлять интерактивность в фигуры или объекты на рабочей области. Код JavaScript можно добавлять в отдельные кадры или ключевые кадры.

  1. Выберите кадр, в который нужно добавить JavaScript.
  2. Выберите Окно >Действия , чтобы открыть панель «Действия».

Использование фрагментов кода JavaScript

Можно добавить фрагменты кода JavaScript, доступные в Animate. Чтобы открыть и использовать фрагменты кода, выберите Окно > Фрагменты кода . Дополнительные сведения о добавлении фрагментов кода JavaScript см. в этой статье.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *