РОЗДІЛ №2 Введення HTML5 Canvas Відмінності HTML5 від попередніх версій. Порівняльний аналіз плюсів і мінусів. 2.1 Переваги HTML5 1. Підвищена безпека 2. Введення даних 3. Відео та аудіо і . Втім , у цього нововведення є і свої недоліки , наприклад відсутність єдиного стандарту для відеокодеків , що не сприяє поки широкому поширенню цієї зручною для користувача і веб- розробників технології . 4. Багаторазове збільшення швидкості роботи 5. Технологія Web Storage 6. Структурні можливості HTML5 2.2 Недоліки HTML5 2.3 Canvas є частиною специфікації WhatWG Web applications 1.0, що відома як HTML 5. вперше було втілено Apple в Mac OS X Dashboard Safari. У Gecko підтримка canvas з'явилася в версії 1.5, уPresto з версії 9.0 веб-браузера Opera. Internet Explorer підтримує canvas починаючи з 9-ї версії. Щоб відобразити в html документі слід використати наступний код: має всього два атрибути — width і height. Обидва вони не є обов'язковими, і можуть бути задані через властивості DOM. Якщо ширина і висота не визначені, canvas буде створений шириною в 300 пікселів і 150 пікселів заввишки. Розмір елемента може бути довільним і задаватися через CSS, але при промальовуванні картинка масштабується відповідно до компонування., але є одним з атрибутів HTML за замовчуванням, і може бути застосований майже до всіх елементів HTML (також як class, наприклад). Завжди визначати id елемента — гарна ідея, тому що це значно спрощує ідентифікацію його в нашому скрипті. може налаштовуватися також, як і звичайне зображення через CSS (margin, border, background, і т.п.). Ці правила, проте, не впливають на саме малювання в canvas. Якщо ніякі налаштування стилю не задані, canvas буде створений повністю прозорим. відносно новий, і не реалізований в деяких браузерах (таких як Firefox 1.0 та Internet Explorer), нам необхідно надати якийсь аварійний вміст елементу, якщо браузер цей елемент не підтримує., проігнорують контейнер і оброблять аварійний вміст всередині нього. Браузери ж, що підтримують , проігнорують вміст контейнера і нормально оброблять canvas. спочатку порожній, і для того, щоб що-небудь відобразити, скрипту необхідно отримати контекст відтворення і малювати вже на ньому. Елемент canvas має DOM-метод, званий getContext, і призначений для отримання контексту відтворення разом з його функціями малювання. getContext () приймає один параметр — тип контексту як «растрове полотно, який може бути використаний для відображення діаграм, ігрової графіки або зображень на льоту». Полотно це прямокутна область на вашій сторінці, де за допомогою JavaScript можна малювати що побажаєте. немає власного контенту та рамки. Полотно з рамкою на одній сторінці. Кожене полотно буде відображатися в DOM і зберігати свій власний стан. Якщо ви додасте кожному полотну атрибут id, то можете отримати до них доступ, як і до будь-якого іншого елементу. в DOM. в DOM. в DOM (за допомогою document.getElementById () або будь-яким іншим засобом), викликаєте метод getContext (). Необхідно зазначити рядок "2D" в методі getContext (). і є контекст малювання , де визначені методи і властивості малювання . Мається ціла група властивостей і методів присвячених малювання прямокутників. лінії , дуги , прямокутники, кола , заливати простір , маніпулювати текстом і картинками. Все це прекрасно описано в « Canvas Tutorial « Mozilla Developers Center з прикладами та рисунками. 
Скачать 0.97 Mb.