JavaScript. Подробное руководство, 6-е издание, стр. 356

Ниже приводится HTML-страница, которая может служить простым примером использования прикладного интерфейса Canvas. Сценарий в ней рисует красный квадрат и голубой круг в элементе

<canvas>,

как показано на рис. 21.2:

<body>

Это красный квадрат: <canvas id="square" width=100 height=100></canvas>.

Это голубой круг: <canvas id="circle" width=100 height=100></canvas>.

<script>

var canvas = document.getElementById("square"); // Найти первый элемент canvas

<b>var context = canvas.getContext(&quot;2d&quot;);          // Получить 2-мерный контекст</b>

<b>context.fillStyle = &quot;#f00&quot;;                     // Цвет заливки - красный</b>

context.fillRect(0,0,100,100); // Залить квадрат

canvas = document.getElementById("circle"); // Второй элемент canvas

<b>context = canvas.getContext(&quot;2d&quot;);              // Получить его контекст</b>

<b>context.beginPath();                            // Начать новый &quot;контур&quot;</b>

context.arc(50, 50, 50, 0, 2*Math.PI, true); // Добавить круг

<b>context.fillStyle = &quot;#00f&quot;;                     // Цвет заливки - синий</b>

context.fill(); // Залить круг

</script>

</body>

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

Canvas

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

beginPath()

агс(),

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

fill()

. Особенности выполнения операций определяются различными свойствами объекта контекста, такими как

fillStyle

. В следующих подразделах рассказывается:

• Как определять фигуры, как рисовать контуры фигур и как выполнять заливку внутренней области фигур.

• Как устанавливать и читать значение графических атрибутов объекта контекста элемента

<canvas>

и как сохранять и восстанавливать текущие значения этих атрибутов.

• О размерах холста, системе координат по умолчанию элемента

<canvas>

и о том, как выполнять трансформации этой системы координат.

• О различных методах рисования кривых объекта

Canvas

• О некоторых специализированных вспомогательных методах рисования прямоугольников.

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

• Об атрибутах, определяющих толщину линий и внешний вид концов линий и вершин многоугольников.

• Как рисовать текст в элементе

<canvas>.

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

• Как добавлять тени к фигурам.

• Как рисовать (и при необходимости масштабировать) изображения в элементе

<canvas>

и как извлекать содержимое этого элемента в виде графического изображения.

• Как управлять созданием составных изображений, когда вновь добавляемые (просвечивающие) пикселы объединяются с существующими пикселами.

• Как получать и записывать красную, зеленую, синюю составляющие цвета и степень прозрачности пикселов в элементе <canvas>.

• Как определить, возникло ли событие мыши, когда ее указатель находился над нарисованным изображением в элементе <canvas>.

В конце этого раздела будет представлен практический пример, в котором элементы <canvas> будут использоваться для отображения небольших внутристрочных диаграмм (sparklines).

Во многих примерах работы с элементом

<canvas>,

которые следуют ниже, используется переменная с. Эта переменная хранит объект

CanvasRenderingContext2D

элемента

<canvas>,

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

<canvas>

с соответствующими атрибутами

width

height

, и следующий программный код, инициализирующий переменную с:

var canvas = document.getElementById("my_canvas_id"); 

var c = canvas.getContext('2d');

Рисунки, которые встретятся вам далее, были созданы сценариями JavaScript, использующими элемент

<canvas>

- обычно с очень большими размерами, чтобы создать изображения с высоким разрешением, пригодные для печати.

21.4.1. Рисование линий и заливка многоугольников

Чтобы нарисовать прямые линии в элементе

<canvas>

и залить внутреннюю область замкнутой фигуры, образуемой этими линиями, необходимо сначала определить контур (path). Контур - это последовательность из одного или более фрагментов контура. Фрагмент контура - это последовательность из двух или более точек, соединенных прямыми линиями (или, как будет показано ниже, кривыми). Создается новый контур с помощью метода

beginPath()

. А фрагмент контура -с помощью метода

moveTo().

После установки начальной точки фрагмента контура вызовом метода

moveTo()

можно соединить эту точку с новой точкой прямой линией, вызвав метод

liпеТо()

. Следующий фрагмент определяет контур, состоящий из двух прямых линий: