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

 </defs>

<b>    &lt;circle id=&quot;face&quot; cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;45&quot;/&gt; &lt;!-- циферблат --&gt;</b>

 <g id="ticks"> 

 <line x1='50' y1='5.000' x2='50.00‘ y2='10.00'/>

 <line x1='72.50' y1='11.03' x2=’70.00' y2='15.36'/>

 <1ine x1='88.97' y1='27.50' x2='84.64' y2='30.00'/>

 <line x1='95.00' y1='50.00' x2='90.00' y2='50.00'/>

 <line х1 = ‘88. 97' у1 = '72. 50' х2='84.64' у2='70.00'/>

 <line х1 = '72. 50' у 1 ='88. 97' х2='70.00' у2='84.64'/>

 <line х1 = '50.00’ у 1 ='95.00' х2='50.00' у2='90.007>

 <line х1 = '27.50' у1 = '88.97' х2='30.00' у2='84.64'/>

 <line х1 = ' 11.03' у1 = '72. 50' х2=' 15.36' у2='70.00'/>

 <line х1='5.000' у1='50.00' х2='10.00' у2='50.00'/>

 <line х1='11.03' у1='27.50' х2='15.36' у2='30.00'/>

 <line х1='27.50' у1='11.03' х2='30.00' у2='15.36/>

 </g>

 <g id="numbers"> 

 <text х="50" y=”18">12</text>

 <text х="85" y="53">3</text>

 <text х="50" y="88">6</text>

 <text х="15" y="53">9</text>

 </g>

<b>    &lt;!-- Нарисовать стрелки, указывающие вверх. Они вращаются сценарием. --&gt;</b>

<b>    &lt;g id=''hands&quot; filter=&quot;url(#shadow)&quot;&gt; &lt;!-- Добавить тени к стрелкам --&gt;</b>

<b>      &lt;line id=&quot;hourhand&quot; x1=&quot;50&quot; у 1=&quot;50&quot; х2=&quot;50&quot; у2=''24&quot;/&gt;</b>

<b>      &lt;line id=&quot;minutehand&quot; х1=&quot;50&quot; у1=&quot;50&quot; х2=&quot;50&quot; у2=&quot;20”/&gt;</b>

 </g>

 </svg>

</body>

</html>

21.4. Создание графики с помощью элемента <canvas>

Элемент

<canvas>

не имеет собственного визуального представления, но он создает поверхность для рисования внутри документа и предоставляет сценариям на языке JavaScript мощные средства рисования. Элемент

<canvas>

стандартизован спецификацией HTML5, но существует дольше его. Впервые он был реализован компанией Apple в броузере Safari 1.3 и поддерживался броузерами Firefox, начиная с версии 1.5, и Opera, начиная с версии 9. Он также поддерживается всеми версиями Chrome. Элемент

<canvas>

не поддерживался броузером IE до версии IE9, но он с успехом имитировался в IE6, 7 и 8 с помощью свободно распространяемого проекта ExplorerCanvas, домашняя страница которого находится по адресу http://code.google.eom/p/explorercanvas/.

Существенное отличие между элементом

<canvas>

и технологией SVG заключается в том, что при использовании элемента

<canvas>

изображения формируются вызовами методов, в то время как при использовании формата SVG изображения описываются в виде дерева XML-элементов. Функционально эти два подхода эквивалентны: любой из них может моделироваться с использованием другого. Однако внешне они совершенно отличаются, и каждый из них имеет свои сильные и слабые стороны. Например, из SVG-рисунков легко можно удалять элементы. Чтобы удалить элемент из аналогичного рисунка, созданного в элементе

<canvas>,

обычно требуется полностью ликвидировать рисунок, а затем создать его заново. Поскольку прикладной интерфейс Canvas основан на синтаксисе JavaScript, а реализация рисунков с его помощью получается более компактной (чем при использовании формата SVG), я решил описать его в этой книге. Подробные сведения вы найдете в части IV книги в справочных статьях Canvas, CanvasRenderingContext2D и родственных им.

Трехмерная графика в элементе <canvas>

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

getContext()

элемента

<canvas>

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

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

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

<canvas>,

а в объекте «контекста рисования», получить который можно методом

getContext()

элемента, играющего роль «холста». Вызов метода

getContext()

с аргументом «2d» возвращает объект

CanvasRenderingContext2D

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

<canvas>

и объект контекста рисования - это два совершенно разных объекта. Поскольку класс объекта контекста имеет такое длинное имя, я редко буду ссылаться на объект

СапvasRenderingContext2D

по имени, а буду просто называть его «объектом контекста». Аналогично, когда я буду употреблять термин «прикладной интерфейс Canvas», я буду подразумевать «методы объекта

CanvasRenderingContext2D

».