More documents

Recommendations

Info

Технологии будущего227ctx.fillStyle = "rgb(200,0,0)";ctx.fillRect (10, 10, 55, 50);ctx.fillStyle = "rgba(0, 0, 200, 0.5)";ctx.fillRect (30, 30, 55, 50);}window.onload = draw;В результате его исполнения мы получим следующее изображение:Рис. 6.4. Пример простого изображения при помощи Canvas,источник: developer.mozilla.orgДополнительно Canvas позволяет определить практически любыедействия пользователя над описываемыми объектами (перемещение инажатия мыши) и загрузить в область объекты MathML и SVG. Как мы видим,на данный момент это полноценная платформа для произвольнойанимации прямо в том же браузере, который предназначен для просмотраотдельных HTML-страниц. Можно с уверенностью предсказать, что черезпару лет обычные Flash-банеры будут вытеснены их более интерактивнымии более «поддерживаемыми» коллегами на основе Canvas (и,скажем, VML для семейства браузеров IE).Подробнее со спецификацией Canvas можно ознакомиться, например,на странице WHATWG (http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html).
228РЕАКТИВНЫЕ ВЕБ-САЙТЫ6.6.4. èappleËÏÂapple˚ ËÒÔÓÎ¸ÁÓ‚‡ÌËfl Canvas, SVG Ë VMLПримеров использования Canvas довольно много, и они частично охватываютуже известные области 2D-графики.2D-проекции 3D-объектовС помощью Canvas можно изображать 2D-проекции трехмерных объектов.В силу того, что все преобразования выполняются на пиксельномуровне, достаточно просто создать необходимые интерфейсы для изометрическихпроекций трехмерных объектов. Видимо, уже скоро на основеCanvas появятся полноценные 3D-экскурсии в браузерах или онлайн-игры«от первого лица».Рис. 6.5. Изображение чайника при помощи Canvas, источник: www.nihilogic.dkTypeface.jsВ качестве следующего применения стоит упомянуть библиотекуtypeface.js (http://typeface.neocracy.org/) и созданный на ее основе методотображения произвольных шрифтов на сайте (ранее для этой целиактивно использовался Flash). Единственным минусом данного подхода(на фоне повышенного быстродействия в связи с естественной поддержкойCanvas и простоты использования) является большой размер файласамих шрифтов.Для применения библиотеки typeface.js необходимо перевести требуемыйшрифт в некоторый объект, описываемый с помощью соответствующихконструкций на JavaScript, затем этот объект будет использоватьсядля представления произвольного текста на сайте (если быть точным,то в качестве объекта выступают отдельные символы шрифта). Размерфайла шрифта в текстовом формате сильно варьируется от количествавключенных в него символов и может составлять от 50 до 500 Кб (в неархивированномвиде).
Page 2 and 3:
Николай Мациевский
Page 4 and 5:
éÉãÄÇãÖçàÖ5 ВВЕДЕН
Page 7 and 8:
é· ‡‚ÚÓapple‡ıДанна
Page 9 and 10:
Однако и здесь доро
Page 11 and 12:
ç‡ ˜ÚÓ ‚ÎËflÂÚ Í‡˜
Page 13 and 14:
12РЕАКТИВНЫЕ ВЕБ-СА
Page 15 and 16:
Page 17 and 18:
Page 19 and 20:
Page 21 and 22:
Page 23 and 24:
Page 25 and 26:
Page 27 and 28:
Page 29 and 30:
Page 31 and 32:
Page 33 and 34:
Page 35 and 36:
Page 37 and 38:
Page 39 and 40:
Page 41 and 42:
Page 43 and 44:
Page 45 and 46:
Page 47 and 48:
Page 49 and 50:
Page 51 and 52:
Page 53 and 54:
Page 55 and 56:
Page 57 and 58:
Page 59 and 60:
Page 61 and 62:
Page 63 and 64:
Page 65:
Page 69 and 70:
Page 71 and 72:
Page 73 and 74:
Page 75 and 76:
Page 77 and 78:
Page 79 and 80:
Page 81 and 82:
Page 83 and 84:
Page 85 and 86:
Page 87 and 88:
Page 89 and 90:
Page 91 and 92:
Page 93 and 94:
Page 95 and 96:
Page 97 and 98:
Page 99 and 100:
Page 101 and 102:
Page 103 and 104:
Page 105 and 106:
Page 107 and 108:
Page 109 and 110:
Page 111 and 112:
Page 113 and 114:
Page 115 and 116:
Page 117 and 118:
Page 119 and 120:
Page 121 and 122:
Page 123 and 124:
Page 125 and 126:
Page 127 and 128:
Page 129 and 130:
Page 131 and 132:
Page 133 and 134:
Page 135 and 136:
Page 137 and 138:
Page 139 and 140:
Page 141 and 142:
Page 143 and 144:
Page 145 and 146:
Page 147 and 148:
Page 149 and 150:
Page 151 and 152:
Page 153 and 154:
Page 155 and 156:
Page 157 and 158:
Page 159 and 160:
Page 161 and 162:
Page 163 and 164:
Page 165 and 166:
Page 167 and 168:
Page 169 and 170:
Page 171 and 172:
Page 173 and 174:
Page 175 and 176:
Page 177 and 178: 176РЕАКТИВНЫЕ ВЕБ-СА
Page 227: 226РЕАКТИВНЫЕ ВЕБ-СА
Page 279 and 280:
Page 281 and 282:
Page 283 and 284:
Page 285 and 286:
Page 287 and 288:
Page 289 and 290:
Page 291 and 292:
Page 293 and 294:
Page 295 and 296:
Page 297 and 298:
Page 299 and 300:
Page 301 and 302:
Page 303 and 304:
Page 305 and 306:
Page 307 and 308:
Page 309 and 310:
Page 311 and 312:
Page 313 and 314:
Page 315 and 316:
Page 317 and 318:
Page 319 and 320:
Page 321 and 322:
Page 323 and 324:
Page 325 and 326:
Page 327 and 328:
Page 329 and 330:
Page 331 and 332:
Page 333 and 334:
Page 335 and 336:
Page 337:
Учебное изданиеМац
show all

Ð ÐµÐ°ÐºÑÐ¸Ð²Ð½ÑÐµ Ð²ÐµÐ±-ÑÐ°Ð¹ÑÑ ÐÐ¸ÐºÐ¾Ð»Ð°Ð¹ ÐÐ°ÑÐ¸ÐµÐ²ÑÐºÐ¸Ð¹ ÐÐ²Ð³ÐµÐ½Ð¸Ð¹ ...

Create successful ePaper yourself

Delete template?

Save as template?

Ð ÐµÐ°ÐºÑÐ¸Ð²Ð½ÑÐµ Ð²ÐµÐ±-ÑÐ°Ð¹ÑÑ ÐÐ¸ÐºÐ¾Ð»Ð°Ð¹ ÐÐ°ÑÐ¸ÐµÐ²ÑÐºÐ¸Ð¹ ÐÐ²Ð³ÐµÐ½Ð¸Ð¹ ...