Шрифт:
<svg id="clock" viewBox="0 0 100 100” width="500" height="500">
<defs> <!-- Определить фильтр для рисования теней -->
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur" />
<fe0ffset in="blur" dx="1" dy="1" result="shadow" />
<feMerge>
<feMergeNode in="SourceGraphic"/xfeMergeNode in="shadow"/>
</feMerge>
</filter>
</defs>
<circle id="face" cx="50" cy="50" r="45"/> <!-- циферблат -->
<g id="ticks"> <!-- 12 часовых меток -->
<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>
<!-- Нарисовать стрелки, указывающие вверх. Они вращаются сценарием.
– ->
– ->
<g id=''hands" filter="url(#shadow)"> <!-- Добавить тени к стрелкам -->
<line id="hourhand" x1="50" у 1="50" х2="50" у2=''24"/>
<line id="minutehand" х1="50" у1="50" х2="50" у2="20”/>
</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 и родственных им.