Створюйте та проектуйте свої веб-сайти в Інтернеті.

Основне полотно

Створюйте власні малюнки та анімацію за допомогою Canvas у HTML5

А тепер також навчіться програмувати на C ++ за допомогою Aprende Web C++

Посібники для створення та дизайну веб-сторінок

Вступ

1. Новий HTML 5

  • 1.1. Що нового в HTML 5
  • 1.2. Структура сторінки
  • 1.3. Форми
  • 1.4. Мультимедіа
  • 1.5. Інші етикетки
  • 1.6. Видалені елементи
  • 1.7. Перетягнути і кинути
  • 1.8. Геолокація
  • 1.9. Місцеве сховище

2. Новий CSS 3

  • 2.1. Що нового в CSS3
  • 2.2. Кілька фондів
  • 2.3. Більше властивостей фонду
  • 2.4. Закруглені кути
  • 2.5. Межує із зображеннями
  • 2.6. Відтінки
  • 2.7. Прозорі плівки
  • 2.8. Кілька стовпців
  • 2.9. Тексти
  • 2.10. Шрифти
  • 2.11. Гнучкі коробки
  • 2.12. Інші властивості
  • 2.13. Нові селектори.

3. Анімація в CSS3

  • 3.1. Моя перша анімація
  • 3.2. Властивості анімації
  • 3.3. Приклад анімації
  • 3.4. Переходи
  • 3.5. Властивість перетворення
  • 3.6. Перетворення в Internet Explorer
  • 3.7. Анімація з перетворенням
  • 3.8. 3D анімація

4. Основне полотно HTML5

  • 4.1. Перший малюнок полотном
  • 4.2. Запуск полотна
  • 4.3. Прямокутники
  • 4.4. Намалюйте маршрути
  • 4.5. Стилі ліній
  • 4.6. Намалюйте арки
  • 4.7. Криві Безьє
  • 4.8. Колір градієнта
  • 4.9. Тіні та прозорі плівки
  • 4.10. Тексти
  • 4.11. Вставити зображення
  • 4.12. Робота із зображеннями

5. Розширене полотно HTML5

  • 5.1. Вкладіть кілька полотен
  • 5.2. Наповнення фігури
  • 5.3. Збережіть і відновіть
  • 5.4. Придатний регіон
  • 5.5. Склад
  • 5.6. Переклад
  • 5.7. Обертання
  • 5.8. Масштабована
  • 5.9. Трансформація

6. SVG в HTML5

  • 6.1. Вступ
  • 6.2. Основні цифри
  • 6.3. Намалюйте маршрути
  • 6.4. Текст
  • 6.5. Наповнення фігури
  • 6.6. Колір градієнта
  • 6.7. Інші елементи
  • 6.8. Трансформації
  • 6.9. Дорожчий
  • 6.10. Анімація I
  • 6.11. Анімація II
  • 6.12. Детальніше про SVG

6. Мобільна версія

Шукати в Інтернеті Aprende

Перекласти сторінку

Відвідайте наш блог:

і з’ясувати, що нового, або залишити коментар.

Запитання та пропозиції:

Про цю сторінку

востаннє змінено: 13.07.2018.

Відвідувань цього місяця: 62

Відвідувань минулого місяця: 114

ВЕБ-ГРАФІКА

Дякую наступним веб-сторінкам. на що я покладався при підготовці цього посібника:

Пожертви

Якщо вам цей сайт цікавий, ви можете внести невеликий внесок.

Стилі ліній

його

Ширина рядка

На цій сторінці ми побачимо кілька властивостей, які можна застосувати для зміни стилю лінії та заливки елементів полотна. Почнемо із зміни товщини лінії.

Ви можете змінити вагу рядка в Canvas за допомогою властивості:

Де значення n - це число, яке вказує товщину лінії в пікселях.

Властивість впливає на всі рядки до методу обведення (). Щоб змінити товщину наступного рядка, спочатку потрібно викликати метод stroke (), а потім lineWidth ();

Давайте подивимось приклад: ми спочатку ставимо HTML-код полотна:

Потім ми пишемо код JavaScript. Пам'ятайте, що як для цього прикладу, так і для наступних, ми вже повинні мати в коді javascript функцію startCanvas (), яку можна побачити на другій сторінці цього посібника.

Результат цього полотна можна побачити тут праворуч.

Зараз ми зробимо другий приклад, в якому ми поставимо кілька рядків, які поступово зменшуються в товщині. Щоб не надто подовжувати код, ми можемо використовувати цикл, який повторює інструкції на кожному рядку; HTML-код полотна буде таким:

І код JavaScript, який буде включений всередину window.onload = function (), буде таким:

Результат попереднього сценарію можна побачити тут праворуч.

Використовуючи цикл тут, ми уникнули необхідності багаторазово писати код для кожного з рядків. Як бачите, усі ресурси javascript можна використовувати для їх застосування до методів та властивостей полотна. Це відкриває цілу низку можливостей, таких як втручання користувача в дизайн за допомогою форм, створення анімованих елементів тощо.

кінець стилю лінії

Ми також можемо змінити кінці рядка. Для цього лінія повинна бути досить товстою, щоб було видно різницю в стилі. Для цього ми будемо використовувати властивість lineCap

Можливі значення, які підтримує ця властивість:

  • "butt": значення за замовчуванням, залиште рядок як є.
  • "круглий": додайте півкруг на початку і в кінці рядка, залишаючи кінці закругленими.
  • "квадрат": додайте половину квадрата до початку та кінця рядка.

Значення повинні бути в лапках (якщо вони не містяться у змінній), оскільки вони є текстовими рядками. У варіантах "круглий" та "квадратний" рядок подовжується на однакову кількість пікселів, товста (половина з них на кожному кінці).

Властивість впливає на весь маршрут, тому, якщо ми хочемо змінити кінцевий стиль, ми повинні розпочати новий маршрут.

Давайте розглянемо приклад, що показує всі три типи кінця рядка. Почнемо з HTML-коду полотна:

А потім ми надаємо код javascript, оскільки його слід завжди завантажувати після сторінки, тому ми включаємо його всередину window.onload = function ().

Результат попереднього коду ми бачимо на полотні праворуч. Значення "круглий" і "квадрат" подовжують лінію на однакову кількість пікселів, коли вона товста.

Кутовий стиль

Коли є дві прямі лінії в ряд, тобто вони роблять кут, властивість lineCap не допомагає нам змінити їх стиль. Це стосується лише початку першого рядка та кінця останнього рядка. Для зміни форми кута ми будемо використовувати властивість lineJoin.

Можливі значення, які підтримує ця властивість:

  • "митра": значення за замовчуванням: кут між двома рядками приймає нормальну форму.
  • "круглий": кут між двома лініями приймає округлу форму.
  • "скос": Кут між двома лініями вирізаний так, щоб він був фаскою.

Як і попередня властивість, вона впливає на весь маршрут, тому, якщо ми хочемо змінити стиль, ми повинні створити новий маршрут. Подивимось приклад зі значеннями цієї властивості. Спочатку ми створюємо HTML-код для полотна:

Потім ми напишемо код javascript для полотна; як завжди ми включаємо його всередину вікна.onload = function ().

Результат полотна - результат, показаний тут праворуч.

Кути між рядками набувають різних стилів залежно від значення, застосованого до методу lineJoin.

Наразі ми зробили прямі лінії, але за допомогою полотна ви можете зробити і криві лінії, ми побачимо це на наступних сторінках