Додавання текстуВи можете на полотні розмістити текст на додаток до лінії або фігури. Сімейство шрифтів, розміру і ваги тексту встановлюються за аналогією CSS, і слідує тим же правилам: по шрифтах, розмірах і вагою значення тексту, які вам доступні. На відміну від CSS, тут немає концепції поля або відступів, текст знаходиться абсолютно у відповідності з координатами, наведеними у форматі XY. У цій вправі ви створите заголовок привітання для вивчення малювання тексту на полотні. 1. Відкрийте файл 05_addingtext.html, який знаходиться в папці HTML5_05lessons і збережіть копію файлу в 05_addingtext_work.html. Файл використовує такий самий шаблон, що ви використовували, за винятком двох прямокутників, розміщених для створення фону привітання. 2. Знайдіть функцію strokeRect та додайте наступний код для малювання тексту заголовка: ctx.fillText('HELLO MY NAME IS', 12, 40); Цей рядок коду малює текстове значення першого параметра в точці з координатами (х) і (у) параметрів. На основі FillStyle значення, встановлені раніше в коді, за замовчуванням, використовується шрифт і колір тексту білий. 3. Збережіть HTML-файл, а потім переключіться в браузер і перегляньте HTML-сторінки, що відображають зміни:
Рисунок 13 – Привітання з невеликим заголовком
4. Для збільшення розміру та ваги тексту заголовка, вставте наступний код перед рядком, з попереднього кроку: ctx.font = "bold 1.8em sans-serif"; ctx.fillText('HELLO MY NAME IS', 12, 40); Зверніть увагу, що як і CSS, ви можете встановити розмір шрифту за допомогою відносних значень. В цьому випадку текст заголовка буде в 1,8 рази більшим розміру шрифту елемента полотна HTML, який успадковується з тіла HTML-сторінки, якщо ви встановите його в явному вигляді. 5. Збережіть HTML-файл, а потім переключіться в браузер і перегляньте HTML-сторінку, що відображає зміни:
Рисунок 13 – Назва привітання, з більшим заголовком
6. Щоб додати назву привітання на заголовок, потрібно додати ще один виклик fillText. Для того, щоб виділити текст ви будете використовувати інший шрифт та більший розмір ctx.fillStyle = 'rgb(0, 0, 0)'; ctx.font = 'bold 84px Comic Sans MS'; ctx.textAlign = 'center'; ctx.fillText('Dianne', 150, 150); Перший рядок задає колір тексту – чорний. Другий рядок задає шрифт для абсолютної висоти 84 пікселів і, за замовчуванням, шрифт Comic Sans MS. Наступний задає горизонтальне вирівнювання тексту по відношенню до позиції координат до центру. Інші можливі варіанти для горизонтального вирівнювання вправо або значення за замовчуванням. 6. Збережіть HTML-файл, а потім переключіться в браузер і перегляньте HTML-сторінку, що відображає зміни:
Рисунок 14 – Ім'я з гарним заголовком і ім'ям в привітанні 10 Використання кольору, стилю і градієнту При виконанні попередніх вправ ви використовували стандартні кольори, але більшість об'єктів, плавно переходять від одного кольору до іншого. Цей тип переходу в полотні називається градієнтом, який доступний у вигляді лінійних або радіальних пензлів. Крім того, в цьому прикладі ви дізнаєтеся про різні способи визначення кольору, у тому числі області прозорості. 1. Відкрийте файл 05_colorsstylesandgradients.html, що знаходиться в папці HTML5_05lessons і збережіть копію файлу в 05_colorsstylesandgradients_work.html. Файл використовує кілька шляхів, які були включені, щоб зробити форму стакану з содовою. 2. Відкрийте браузер і перегляньте HTML-сторінку, щоб побачити порожній стакан содової.
Рисунок 15 – Порожній стакан содової з жорсткою тінню 3. Поверніться в текстовий редактор і після strokeRect функції, змініть FillStyle колір з чорного на сірий, як показано тут: ctx.fillStyle = 'gray'; У попередніх прикладах ми використовували RGB для визначення кольорів, але є зарезервовані ключові слова для простоти використання. Інші ключові слова включають основні кольори, такі як червоний, синій, оранжевий і фіолетовий. 4. Збережіть HTML-файл, а потім переключіться в браузер і перегляньте HTML-сторінку, що відображає ваші зміни.
Рисунок 16 – Порожній стакан газованої води з м'якою тінню 5. Ви також можете заповнити стакан з содовою за допомогою лінійного градієнта. Вставте наступний код: var lineGrad = ctx.createLinearGradient(150, 81, 150, 268); lineGrad.addColorStop(0, '#fff'); lineGrad.addColorStop(0.05, '#450c0c'); lineGrad.addColorStop(0.6, '#874040'); lineGrad.addColorStop(1, 'rgba(202, 147, 147, 0.6)'); ctx.fillStyle = lineGrad; Перший рядок визначає нові кисті лінійного градієнта, де перші два параметри визначають початкову точку градієнта, і наступні два параметри визначають кінцеву точку градієнта. Місця використання координат х і у потрібні для позиціонування прямокутника або круга. Наступні чотири рядки визначають різні суміші кольору в градієнті. Перший параметр визначає положення кольору припинити по відношенню до початкової і кінцевої точки градієнта (0 відповідає початковій точці і 1 представляє кінцеву точку). Другий параметр визначає колір суміші. Шістнадцятковий формат використовується для визначення перших трьох кольорів. Останній колір визначається за допомогою функції RGBA, яка розширює функції RGB, додавши ще один параметр, який використовується як альфа або прозорість кольору. Непрозорість встановлюється за шкалою від 0 до 1, де 0 означає повністю прозорий колір і 1 є повністю непрозорий колір. 6. Останній рядок змінює FillStyle до нової кисті лінійного градієнта. Набір FillStyle застосовується на новий лінійний градієнт, щоб заповнити чашу контур. Додайте наступний рядок після цієї функції. ctx.fill (); 7. Збережіть HTM-файл, а потім переключіться в браузер і перегляньте HTML-сторінку, що відображає зміни:
Рисунок 17 – Повний стакан содової 8. Поверніться в текстовий редактор та за допомогою декількох радіальних градієнтів після ctx.fill додайте наступні рядки: ctx.strokeStyle = 'RGBA (255, 255, 255, 0.5); ctx.lineWidth = 2; Перші зміни лінії strokeStyle за замовчуванням чорний напівпрозорий білий. Другий рядок змінює ширину ходу за замовчуванням з 1 пікселя на 2 пікселя. 9. Після того, як створені лінії на попередньому кроці, додайте наступні рядки: var radGrad = ctx.createRadialGradient(116, 107, 1, 120, 110, 10); radGrad.addColorStop(0, 'white'); radGrad.addColorStop(0.9, 'rgba(255, 255, 255, 0)'); Перший рядок визначає радіальний градієнт в манері, схожій з лінійним градієнтом. Початкова і кінцева точки для градієнта встановлюється (перший і другий параметри для початкової точки, четвертий і п'ятий на кінцевій точці). Основна відмінність полягає в третьому і шостому параметрах, які використовуються в якості радіуса відповідного пункту. У даному прикладі початкова точка визначається в положення х 116, а у позиція з 107 з радіусом 1. Кінцева точка визначається в положення х 120, у позиція з 110 з радіусом 10. 10. За радіальним градієнтом зовнішній вигляд визначено, ви можете використовувати його також для заповнення кола. Додайте наступні рядки. ctx.fillStyle = radGrad; ctx.beginPath(); ctx.arc(120, 110, 10, 0, Math.PI * 2, false); ctx.fill(); ctx.stroke(); 11. Збережіть HTML-файл, а потім переключіьтся в браузер і перегляньте HTML-сторінку, що відображає зміни:
Рисунок 18 – Повний стакан газованої води з бульбашкою
12. Щоб додати ще одну бульбашку, необхідно визначити нові кисті, так як координати встановлені в абсолютній позиції. Якщо перемістити або змінити розмір, необхідно перемістити кисті, а також. radGrad = ctx.createRadialGradient(164, 140, 1, 168, 143, 8); radGrad.addColorStop(0, 'white'); radGrad.addColorStop(0.9, 'rgba(255, 255, 255, 0)'); ctx.fillStyle = radGrad; ctx.beginPath(); ctx.arc(168, 143, 8, 0, Math.PI * 2, false); ctx.fill(); ctx.stroke(); 13. Збережіть HTML-файл, а потім переключіться в браузер і перегляньте HTML-сторінку, що відображає зміни:
Рисунок 19 – Повний стакан содової з двома бульбашками 14. Додайте ще одну бульбашку для завершення композиції: radGrad = ctx.createRadialGradient(127, 185, 1, 130, 188, 6); radGrad.addColorStop(0, 'white'); radGrad.addColorStop(0.9, 'rgba(255, 255, 255, 0)'); ctx.fillStyle = radGrad; ctx.beginPath(); ctx.arc(130, 188, 6, 0, Math.PI * 2, false); ctx.fill(); ctx.stroke(); 15. Збережіть HTML-файл, а потім переключіться в браузер і перегляньте HTML-сторінку, що відображають зміни:
Рисунок 20 – Повний стакан содової з трьома бульбашками.
|
