Създавайте и проектирайте вашите сайтове в мрежата.

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

Създайте свои собствени рисунки и анимации с 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 Advanced Canvas

  • 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 Web

Превод на страница

Посетете нашия блог:

и разберете какво е новото или оставете коментар.

Въпроси и предложения:

За тази страница

последно изменение: 07-13-2018.

Посещения този месец: 62

Посещения миналия месец: 114

УЕБ-ГРАФИКА

Благодаря на следните уеб страници. на които разчитах при подготовката на това ръководство:

Дарения

Ако този сайт Ви е интересен, можете да допринесете с малък принос.

Линейни стилове

HTML кода платното

Ширина на линията

На тази страница ще видим няколко свойства, които могат да бъдат приложени за промяна на стиловете на линията и запълването на елементите на платното. Ще започнем с промяна на дебелината на линията.

Можете да промените тежестта на линията в Canvas със свойството:

Където стойността n е число, което показва дебелината на линията в пиксели.

Свойството засяга всички редове преди метода stroke (). За да променим дебелината на следващия ред, първо трябва да извикаме метода 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.

Досега сме правили прави линии, но с платно можете да правите и криви линии, това ще видим на следващите страници