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

Флэнаган Дэвид
Шрифт:
Трехмерная графика в элементе <canvas>

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

getContext
элемента
<canvas>
следует передать строку «webgl». WebGL - это обширный, сложный и низкоуровневый прикладной интерфейс, и он не описывается в этой книге: веб-разработчики, скорее всего, предпочтут использовать вспомогательные библиотеки, основанные на WebGL, чем непосредственно сам прикладной интерфейс WebGL.

**********************************************

Большая часть прикладного интерфейса Canvas определена не в элементе

<canvas>,
а в объекте «контекста рисования», получить который можно методом
getContext
элемента, играющего роль «холста». Вызов метода
getContext
с аргументом «2d» возвращает объект
CanvasRenderingContext2D
, который можно использовать для рисования двухмерной графики. Важно понимать, что элемент
<canvas>
и объект контекста рисования - это два совершенно разных объекта. Поскольку класс объекта контекста имеет такое длинное имя, я редко буду ссылаться на объект
СапvasRenderingContext2D
по имени, а буду просто называть его «объектом контекста». Аналогично, когда я буду употреблять термин «прикладной интерфейс Canvas», я буду подразумевать «методы объекта
CanvasRenderingContext2D
».

Ниже приводится 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

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

context.fillStyle = "#f00"; // Цвет заливки - красный

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

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

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

context.beginPath; // Начать новый "контур"

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

context.fillStyle = "#00f"; // Цвет заливки - синий

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

</script>

</body>

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

Canvas
тоже используется понятие контура. Однако контур в данном случае описывается не как строка из символов и чисел, а как последовательность вызовов методов, таких как
beginPath
и
агс,
использованных в примере выше. После того как контур будет определен, к нему можно применять различные операции, выполняемые такими методами, как
fill
. Особенности выполнения операций определяются различными свойствами объекта контекста, такими как
fillStyle
. В следующих подразделах рассказывается:

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

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

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

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

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

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

Canvas
.

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

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

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

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

<canvas>.

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