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

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

Переваги елемента 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Р,где...


Аальтернативная стоимость. Кривая производственных возможностей В экономике Буридании есть 100 ед. труда с производительностью 4 м ткани или 2 кг мяса...

Случайной величины Плотностью распределения вероятностей непрерывной случайной величины Х называют функцию f(x) – первую производную от функции распределения F(x): Понятие плотность распределения вероятностей случайной величины Х для дискретной величины неприменима...

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

Уравнение волны. Уравнение плоской гармонической волны. Волновое уравнение. Уравнение сферической волны Уравнением упругой волны называют функцию , которая определяет смещение любой частицы среды с координатами относительно своего положения равновесия в произвольный момент времени t...

Ваготомия. Дренирующие операции Ваготомия – денервация зон желудка, секретирующих соляную кислоту, путем пересечения блуждающих нервов или их ветвей...

Билиодигестивные анастомозы Показания для наложения билиодигестивных анастомозов: 1. нарушения проходимости терминального отдела холедоха при доброкачественной патологии (стенозы и стриктуры холедоха) 2. опухоли большого дуоденального сосочка...

Сосудистый шов (ручной Карреля, механический шов). Операции при ранениях крупных сосудов 1912 г., Каррель – впервые предложил методику сосудистого шва. Сосудистый шов применяется для восстановления магистрального кровотока при лечении...

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