Canvas black

Настройки цвета и размера

Стили для заливки и обводки имеют глобальный параметр. Если вы задали какое-то свойство, то оно применится для всех элементов, если не был после этого изменен. Например, мы сначала задали зелёный цвет для заливки и синий для обводки. Если после этого мы нарисуем несколько фигур, то они все будут иметь зелёный фон и синюю обводку.

За заливку отвечает свойство fillStyle. По умолчанию для заливки используется чёрный цвет. За цвет и стиль обводки отвечает свойство strokeStyle.

Цвет задается точно так же как и в CSS (четыре способа)

Есть ещё редко используемый способ через HSL – hsl(219, 58%, 93%).

Установим желаемые настройки – укажем, что мы хотим красный цвет (#FF0000) и толщину в 3 пиксела для обводки и зеленый цвет (#00FF00) для заливки:

Image pixel formats (experimental)

constcanvas=createCanvas(200,200)constctx=canvas.getContext('2d',{ pixelFormat'A8'})

These additional pixel formats have experimental support:

  • Like , but the 8 alpha bits are always opaque. This format is always used if the context attribute is set to false (i.e. ). This format can be faster than because transparency does not need to be calculated.
  • Each pixel is 16 bits, with red in the upper 5 bits, green in the middle 6 bits, and blue in the lower 5 bits, in native platform endianness. Some hardware devices and frame buffers use this format. Note that PNG does not support this format; when creating a PNG, the image will be converted to 24-bit RGB. This format is thus suboptimal for generating PNGs. instances for this mode use a instead of a .
  • Each pixel is 1 bit, and pixels are packed together into 32-bit quantities. The ordering of the bits matches the endianness of the
    platform: on a little-endian machine, the first pixel is the least-significant bit. This format can be used for creating single-color images. Support for this format is incomplete, see note below.
  • Each pixel is 30 bits, with red in the upper 10, green in the middle 10, and blue in the lower 10. (Requires Cairo 1.12 or later.) Support for this format is incomplete, see note below.

Notes and caveats:

  • Using a non-default format can affect the behavior of APIs that involve pixel data:

    • The size of the array returned depends on the number of bit per pixel for the underlying image data format, per the above descriptions.
    • As above.
  • and do not yet support or . Have a use case and/or opinion on working with these formats? Open an issue and let us know! (See #935.)

  • , , and with shadow blurs may crash or not render properly.

  • The and constructors assume 4 bytes per pixel. To create an instance with a different number of bytes per pixel, use or .

Прямоугольники

Начнем с прямоугольника. В canvas есть два вида прямоугольников — залитые и незалитые (обводка). Предусмотрены три функции для рисования прямоугольников.

  • strokeRect(x, y, ширина, высота) — рисует границы прямоугольника
  • fillRect(x, y, ширина, высота) — рисует закрашенный прямоугольник
  • clearRect(x, y, ширина, высота) — Очищает область на холсте размер с прямоугольника заданного размера в указанной позиции

Функция clearRect() как бы вырезает кусок фигуры, за которым можно увидеть холст.

Нарисуем два вида прямоугольников.

Пример

Попробуйте нарисовать ещё один закрашенный прямоугольник и вырезать из него прямоугольник меньшего размера.

Каждая добавляемая фигура размещается на отдельном уровне; следующий фрагмент кода создаёт три прямоугольника со смещением в 15 пикселей, чтобы они частично наложились друг на друга.

Наложение прямоугольников

Рисуем шахматную доску

Шахматная доска

В этом примере мы установили размер холста 300 на 300 пикселей. Далее мы нарисовали два пустых прямоугольника, которые формируют рамку вокруг нашей «шахматной доски». Далее закрашиваем внутреннюю часть рамки прямоугольником черного цвета, а затем в цикле делаем в них своеобразные квадратные “дырки”, чтобы через них просвечивал белый цвет. В итоге у нас получится красивая шахматная доска.

Рисование изображений

Чтобы нарисовать изображение, нужно создать его объект с помощью конструктора Image, затем установить путь к изображению через свойство src полученного объекта.

Прежде чем рисовать изображение, его стоит загрузить. Для этого добавим обработчик события load для объекта img, добавим его после создания объекта.

Далее можно нарисовать изображение исходного размера с помощью функции drawImage(object img, float x, float y), где указывается его верхний левый угол в точке (x;y).

Для масштабирования используется другая версия функции – drawImage(object img, float x, float y, float w, float h) – в последних двух параметрах указывается ширина и высота.

Также можно обрезать картинку через ещё одну версию функции drawImage(object img, float sx, float sy, float sw, float sh, float cx, float cy, float cw, float ch) – нарисует часть изображения шириной sw и высотой sh расположенную в точке (sx,sy) в исходном изображении на canvas с шириной cw и высотой ch в точке (cx,cy).

Выведем изображения с разными размерами.

Нельзя вызывать метод drawImage(), если картинка не загружена в браузер. В примере я заранее вывел картинку при помощи тега img. Обычно, в подобных случаях используют вызов window.onload() или document.getElementById(“imageID”).onload.

Ваш браузер не поддерживает canvas

Для сохранения изображений существует три метода (getAsFile,getBlob,toDataURL), самый удобный – toDataURL поскольку именно он наиболее хорошо поддерживается браузерами. Стоит заметить что метод применяется не к контексту, а к canvas элементу, впрочем его можно получить как свойство ‘canvas’ контекста, также этот метод принимает как аргумент тип изображения (по умолчанию ‘png’). Этот метод вернет изображение в формате base64.

Цвета, стили, тени¶

Свойства:

Устанавливает/возвращает цвет, градиент или шаблон, используемый для заливки графического объекта
Устанавливает/возвращает уровень размытости для теней
Устанавливает/возвращает цвет для теней
Устанавливает/возвращает горизонтальное расстояние тени от фигуры
Устанавливает/возвращает вертикальное расстояние тени от фигуры
Устанавливает/возвращает цвет, градиент или шаблон, используемый для обводки фигуры

Методы:

Определяет цвета и позицию остановки в объекте градиента
Создает линейный градиент (для использования с содержимым элемента )
Размножает заданный элемент в заданном направлении
Создает радиальный/круговой градиент (для использования на содержимом элемента )

Окружности

Окружности рисуются с помощью команды arc(ox, oy, radius, startAngle, endAngle, antiClockWise), где ox и oy — координаты центра, radius — радиус окружности, startAngle и endAngle — начальный и конечный углы (в радианах) для отрисовки окружности, а antiClockWise — направление движения при отрисовке (true для против часовой стрелке, false — против). С помощью arc() можно рисовать как круги и окружности, так и дуги и части окружности.

Окружность с радиусом в 100 пикселей:

Нарисуем разноцветный круг:

Код нарисует круг, состоящий из 6 сегментов с произвольными цветами, которые будут меняться при обновлении страницы

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

Дольки

Теперь нарисуем круги из этих же фигур.

Дольки

Нарисуем частично залитую окружность.

Частично залитая окружность

Нарисуем круги в случайном порядке.

круги в случайном порядке

PDF Output Support

node-canvas can create PDF documents instead of images. The canvas type must be set when creating the canvas as follows:

constcanvas=createCanvas(200,500,'pdf')

An additional method is then available to create multiple page PDFs:

ctx.font='22px Helvetica'ctx.fillText('Hello World',50,80)ctx.addPage()ctx.font='22px Helvetica'ctx.fillText('Hello World 2',50,80)canvas.toBuffer()canvas.createPDFStream()canvas.toBuffer('application/pdf',{  title'my picture',  keywords'node.js demo cairo',  creationDatenewDate()})

It is also possible to create pages with different sizes by passing and to the method:

ctx.font='22px Helvetica'ctx.fillText('Hello World',50,80)ctx.addPage(400,800)ctx.fillText('Hello World 2',50,80)

See also:

Контуры¶

Методы:

Создает дугу/кривую (используется для создания окружностей или их части)
Создает дугу/кривую между двумя касательными
Начинает контур или сбрасывает текущий контур
Создает кубическую кривую Безье
Обрезает область любой формы и размера, находящуюся вне указанного контура
Замыкает контур соединяя последнюю точку с первой
Делает заливку текущей фигуры (контура)
Возвращает значение , если заданная точка находится внутри текущего контура, в обратном случае возвращается значение
Добавляет новую точку контура и создает линию к этой точке от последней заданной точки
Передвигает точку контура в заданные координаты не рисуя линию
Создает квадратичную кривую Безье
В действительности рисует определенный вами контур

Рисование текста

Существуют функции рисование текста. Залитый текст рисуется через функцию context.fillText(string text, float x, float y) в точке (x;y)

Функция fillText() имеет необязательный аргумент maxWidth, который не совсем корректно работает в некоторых браузерах.

Свойство контекста font управляет стилем текста и имеет синтаксис схожий с css:

Не все атрибуты свойства font обязательно указывать. Если какой-то атрибут пропущен, то будет использоваться значение по умолчанию.

Для стилей используются следующие значения

  • normal(the default)
  • italic
  • oblique(similar to italic, usually associated with sans-serif faces)
  • inherit (style comes from the parent element)

Для веса используются значения:

  • normal(the default)
  • bold | bolder
  • lighter
  • 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  • inherit(weight comes from the parent element)

Для размеров:

  • px – pixels
  • pt – points
  • em

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

  • Sans-serif: Arial, Verdana
  • Serif: Georgia, Times New Roman, Times
  • Monospace: Courier New, Courier

Управлять цветом мы можем через свойства fillStyle и strokeStyle.

Для рисования контуров текста применяется функции strokeText() вместо fillText().

Для выравнивания текста существует свойство textAlign, оно может принимать пять возможных значений:

  • left — текст выравнивается слева
  • right — текст выравнивается справа
  • center — текст выравнивается по центру
  • start — (значение по умолчанию) текст выравнивается от начала линии слева для письма слева на право и выравнивается справа для письма справа налево
  • end — текст выравнивается от начала линии справа для письма слева на право и выравнивается слева для письма справа налево

Для управления линией основания текста существует свойство textBaseline, оно может принимать следующие значения:

  • top
  • hanging
  • middle
  • alphabetic
  • ideographic
  • bottom

Измерить ширину текста можно через measureText(string text). Она вернет специальный объект TextMetrics, который обладает свойством width — ширина текста в пикселях.

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