Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Переваги елемента Canvas





Графічний елемент дозволяє створювати графіки, які могли б бути створені в таких програмах, як Photoshop, Illustrator, або, якщо вони містять анімовану графіку, створену в флеш або Silverlight. Різниця в тому, що замість використання інструментів цих програм, ви будете створювати форми, градієнти, текст та інші об'єкти в коді.

Безсумнівно, ви не зможете створити додаток, який дозволять вам спроектувати полотно на основі об'єктів і анімації – без написання коду. Елемент Canvas має хорошу підтримку браузера і вона буде використовуватися в якості заміни "мультимедійних" засобів, для онлайн-ігор, анімації, графіки, візуалізації даних, а також для створення інтерфейсів користувачів.

Однією з переваг використання Canvas для сценаріїв є відсутність потреби у використанні плагіну браузера. Є й інші сценарії використання Canvas: іконки інтерфейсу користувача є одним з прикладів такого типу графіки. Образи, створені з полотна елемента можуть бути збережені зі сторінок у вигляді PNG файлів, спробуйте уявити версію веб-додатків, що дозволяють експортувати зображення.

5 Малювання шляхів

Шляхи та форми є будівельними блоками нанесення графіки на елементі Canvas. Після того як ви отримаєте уявлення про основні функції, можна зробити більш складні візуальні ефекти, такі як графіка, що заснована на даних, анімовані спрайт-ігри та інші цікаві візуальні ефекти. Перші кілька функцій у цій вправі також буде забезпечувати загальний огляд того, як елемент Canvas працює.

6 Малювання прямокутників

1. Відкрийте 05_drawingrectangles.HTML-файл і збережіть копію файлу 05_drawingrectangles_work.html. У коді ви побачите вже визначені елементи Canvas, і функцію JavaScript під назвою налаштування, яке запускається при відкритті сторінки. В налаштуваннях функції, посилання на контекст 2D Canvas елемент було збережено на змінну, яка буде використовуватися для малювання.

У разі потреби, додайте наступний код, щоб намалювати прямокутник, який описує Canvas:

function setup() {

  var canvas = document.getElementById('lessonCanvas');

  if (canvas.getContext) {

    var ctx = canvas.getContext('2d');

      ctx.strokeRect(0, 0, 300, 300);

  }

}

Зверніть увагу, що координати х і у мають значення 0, вони розпочинають шлях прямокутника у верхньому лівому кутку, ширина і висота встановлюються до 300, при цьому встановлюється відповідний розмір полотна елемента.

2. Після того, як лінія буде розміщена, додайте наступні два рядки, які змінюють поточний колір окантовки за замовчуванням та малюють чорний, червоний прямокутники за наступною схемою:

ctx.strokeStyle = "RGB (255, 0, 0);

ctx.strokeRect (0.5, 0.5, 100, 100);

3. Збережіть файл drawingrectangle_work.html і відкрийте файл в браузері. Ви повинні побачити малюнок схожий на наступному малюнку. Як і в багатьох прикладах HTML5, якщо ви нічого не побачите у вашому браузері, вам потрібно переконатися, що він підтримує графічний елемент.

Рисунок 4 – Виведення чорного і червоного прямокутників

4. Поверніться до текстового редактору і додайте наступні рядки коду, щоб намалювати заповнений прямокутник:

ctx.fillRect (20, 20, 100, 100);

5. Додайте ще два рядки коду, щоб змінити поточний колір заливки за замовчуванням чорний на зелений і зробіть ще один заповнений прямокутник з використанням нових кольорів:

ctx.fillStyle = "RGB (0, 255, 0);

ctx.fillRect (50, 50, 100, 100);

6. Виберіть File> Save, а потім перейдіть до web-браузера. Якщо сторінка все ще відкрита, поновіть сторінку в браузері, або повторно відкрийте робочий файл, який використовується для цього прикладу. Ваш браузер має відображати на наступному малюнку:

Рисунок 5 – Виведення чорного і червоного прямокутників,

та чорного і зеленого замальованих прямокутників

7. Залиште сторінки браузера відкритими і поверніться до текстового редактора. В текстовому редакторі додайте наступні рядки коду, щоб очистити пікселі в даному прямокутнику:

ctx.clearRect (80, 80, 30, 30);

8. Збережіть документ у текстовому редакторі, а потім перейдіть до web-браузера та оновіть сторінку, ви побачите малюнок схожий на малюнок нижче. Функція ClearRect робить пікселі прозорими, частково видаляє кольори.

Рисунок 5 – Виведення чорного і червоного прямокутників,та чорного і зеленого замальованих прямокутників з прямокутним отвором

 

7 Малювання ліній і кіл

Функції прямокутника з попереднього прикладу є основними функціями малювання, об'єднані для зручності їх використання.

Основні функції прямокутника:

ctx.moveTo (0, 0);

ctx.lineTo (300, 0);

ctx.lineTo (300, 300);

ctx.lineTo (0, 300);

ctx.lineTo (0, 0);

ctx.stroke ();

 

MoveTo (х, у) створює новий шлях підрозділу в задані координати. LineTo (х, у) додає нову точку на поточний шлях, що з'єднує попередній з прямою лінією.

1. Відкрийте 05_drawinglinesandcircles.HTML-файл і збережіть копію файлу 05_drawinglinesandcircles_work.html. В цей файл вже в контексті малювання включена функція установки. Тепер додамо прямокутник і ряд зигзагоподібних ліній.

2. В функції установки, після CTX line var ctx = canvas.getContext('2d');, додамо наступний код:

ctx.strokeRect (0, 0, 300, 300);

ctx.moveTo (20, 20);

ctx.lineTo (100, 100);

ctx.lineTo (80, 200);

ctx.lineTo (200, 80);

ctx.lineTo (200, 200);

ctx.lineTo (280, 280);

ctx.stroke ();

3. Збережіть вашу роботу в текстовому редакторі, а потім перейдіть у браузер. Відкрийте сторінку в браузері, щоб розглянути HTML. В результаті сторінка повинна бути схожа на малюнку нижче:

Рисунок 6 - Чорний контур і зигзагом на полотні

Ви помітили, що функція LineTo корисна для малювання ліній і прямокутників. Тепер ви будете міняти колір заливки зигзагоподібної лінії.

4. Перейдіть в текстовий редактор і додайте наступні рядки після введеного раніше коду:

ctx.fillStyle = "RGB (255,0,0);

ctx.arc (100, 100, 16, 0, Math.PI * 2, помилковий);

ctx.fill ();

Перший рядок змінює поточний колір заливки, за замовчуванням, з чорного на червоний. Друга лінія малює повне коло з центром в точці координат (100, 100) і радіусом 16. Останні три параметри дуги функція визначають довжину дуги. startAngle і endAngle в радіанах, визначає початкову та кінцеву точки, напрямок лінії між двома точками визначається проти годинникової стрілки параметрів. Цей код визначає дугу, яка починається з 0 (права центрована точка кола) і продовжується за годинниковою стрілкою, поки не досягне точки 2π радіан, або повне обертання на 360 градусів, утворюючи коло.

5. Виберіть File> Save, а потім переключіться в браузер і перегляньте HTML-сторінку. Як бачите, коло було додане в поточний шлях на південь ліній. Так як лінії та кола є частиною одного й того ж шляху на південь, вся область буде кольоровою, а не тільки коло.

Рисунок 7 – Чорний контур і заповнити зигзагоподібним

6. Щоб намалювати окремі шляхи, ви повинні використовувати функцію beginPath, яка очищає поточний шлях на південь і дає новий старт. Поверніться до текстового редактору, та вставте між FillStyle і дугами функції, наступні рядки наступним чином:

ctx.fillStyle = "RGB (255,0,0);







Дата добавления: 2015-09-07; просмотров: 586. Нарушение авторских прав; Мы поможем в написании вашей работы!




Шрифт зодчего Шрифт зодчего состоит из прописных (заглавных), строчных букв и цифр...


Картограммы и картодиаграммы Картограммы и картодиаграммы применяются для изображения географической характеристики изучаемых явлений...


Практические расчеты на срез и смятие При изучении темы обратите внимание на основные расчетные предпосылки и условности расчета...


Функция спроса населения на данный товар Функция спроса населения на данный товар: Qd=7-Р. Функция предложения: Qs= -5+2Р,где...

Анализ микросреды предприятия Анализ микросреды направлен на анализ состояния тех со­ставляющих внешней среды, с которыми предприятие нахо­дится в непосредственном взаимодействии...

Типы конфликтных личностей (Дж. Скотт) Дж. Г. Скотт опирается на типологию Р. М. Брансом, но дополняет её. Они убеждены в своей абсолютной правоте и хотят, чтобы...

Гносеологический оптимизм, скептицизм, агностицизм.разновидности агностицизма Позицию Агностицизм защищает и критический реализм. Один из главных представителей этого направления...

Сравнительно-исторический метод в языкознании сравнительно-исторический метод в языкознании является одним из основных и представляет собой совокупность приёмов...

Концептуальные модели труда учителя В отечественной литературе существует несколько подходов к пониманию профессиональной деятельности учителя, которые, дополняя друг друга, расширяют психологическое представление об эффективности профессионального труда учителя...

Конституционно-правовые нормы, их особенности и виды Характеристика отрасли права немыслима без уяснения особенностей составляющих ее норм...

Studopedia.info - Студопедия - 2014-2025 год . (0.014 сек.) русская версия | украинская версия