Вот документ HTML, содержащий простую SVG-картинку:
>
Normal HTML here.
>
>
>
> stroke="blue" fill="none"/>
>
Атрибут >xmlns меняет пространство имён элемента по умолчанию. Это пространство задаётся через URL и обозначает диалект, на котором мы сейчас говорим. Тэги > и >, не существующие в HTML, имеют смысл в SVG – они рисуют формы, используя стиль и позицию, заданные их атрибутами.
Они создают элементы DOM так же, как теги HTML. К примеру, такой код меняет цвет элемента на >cyan:
>var circle = document.querySelector(«circle»);
>circle.setAttribute(«fill», «cyan»);
Элемент холста canvas
Графику холста можно рисовать на элементе >. Ему можно задать ширину и высоту, таким образом определяя его размер в пикселях.
Новый холст пуст, то есть он полностью прозрачен и показывает нам пустое пространство документа.
Тэг > поддерживает разные стили рисования. Чтобы получить доступ к интерфейсу рисования, сначала нужно создать >context – объект, чьи методы предоставляют этот интерфейс. Сейчас есть два широко распространённых стиля рисования: >“2d” для двумерной графики и >“webgl” для трёхмерной графики при помощи интерфейса OpenGL.
WebGL мы обсуждать не будем, остановимся на двух измерениях. Если вам интересны три измерения, я советую вам окунуться в мир WebGL. Он предоставляет непосредственный доступ к современному графическому железу, поэтому с его помощью можно создавать довольно сложную и эффективную графику прямо из JavaScript.
Context создаётся методом >getContext элемента >.
>
Before canvas.
>
>
After canvas.
>
После создания объекта >context пример рисует прямоугольник шириной в 100 пикселей и высотой в 50, с координатами левого верхнего угла (10, 10).
Точно как в HTML (и SVG), используемая холстом система координат помещает точку (0, 0) в левый верхний угол, и положительная часть оси Y идёт оттуда вниз. То есть, точка (10,10) на 10 пикселей ниже и правее верхнего левого угла.
Заливка и обводка
В интерфейсе холста форму можно залить, что означает, что занимаемая ею область будет закрашена нужным цветом или шаблоном, или же можно сделать stroke – обвести область линией по краю. Та же терминология используется в SVG.