Підготовка до малювання
Щоб почати творити, необхідно створити сам полотно, а також зв'язати з ним скрипт.
Вказуємо полотну розміри, а також ідентифікатор. Він потрібен для того, щоб зв'язати полотно зі скриптом, що ми зараз і зробимо:
Запишемо в змінну field цей рядок, вона дозволить малювати всередині полотна за допомогою різних методів. Отже, тепер ми можемо переходити до спроб малювання. Для зручності я зроблю фон полотна жовтим, а не білим, щоб чітко було видно все відступи.
Приклад 1 - прямокутник без заливки
Тепер у нас є змінна field і звертаючись до різних методів можна малювати всередині контейнера canvas. В першу чергу можна відрегулювати товщину лінії, а також її колір, це робиться за допомогою наступних рядків:
field.lineWidth = 4;
field.strokeStyle = '# 173045';
Відмінно, параметри задані. Тепер нам важливо зрозуміти, як взагалі відбувається малювання. Відбувається воно за таким принципом: є координата х. воно починається на початку полотна і рухається вправо, а також є координата y. вона також починається спочатку контейнера, але йде вниз. Щоб ви це усвідомили краще, дивіться цю картинку:
І як же відбувається малювання прямокутника? Спочатку завжди задається зсув по координаті x. а після по у. Після завдання цього початкового положення потрібно всього лише вказати ширину і висоту прямокутника. Спочатку ширину, а потім - висоту. дивимося:
field.strokeRect (80, 90, 120, 70);
результат:
Тут перший параметр в дужках це зміщення по x, другий - зсув по у, третій - ширина, четвертий - висота. Все, це досить запам'ятати, щоб малювати прямокутники.
Приклад 2 - прямокутник із заливкою
Робиться в цьому випадку все таким же чином, змінюється тільки назва методу:
field.fillStyle = '# 173045';
field.fillRect (50, 50, 130, 85);
Метод fillStyle дозволяє визначити колір заливки. Я поки видалив минулий наш прямокутник, новий виглядає так:
Як бачите, все 4 параметра задаються в тій же послідовності. Якщо обнулити перші два значення, то прямокутник буде намальований у верхньому лівому кутку полотна.
Приклад 3 - лінія і складні фігури
Як ви розумієте, описані вище методи не годяться для створення складних фігур. Давайте намалюємо на canvas трикутник. Це не так складно, як могло б здатися на перший погляд.
Метод beginPath () потрібен для того, щоб показати початок малювання довільної фігури. Метод moveTo () встановлює початкову координату для малювання. Як ви розумієте, у нього два параметри - координати по x і y. Значить, щоб підготуватися до малювання складної фігури потрібні такі рядки коду:
field.beginPath ();
field.moveTo (30, 30);
Для прикладу я почну малювати трикутник з точки в 30 пікселях справа і знизу від лівого верхнього кута полотна. Малювання відбувається за допомогою ліній, метод lineTo ():
field.beginPath ();
field.moveTo (30, 30);
field.lineTo (150, 100);
field.lineTo (250, 30);
field.closePath ();
field.lineWidth = 3;
field.strokeStyle = 'silver'
field.stroke ();
Тут я нагородив багато коду, але зараз все поясню, поки дивіться на результат:
Як бачимо, цілком собі трикутник. Ми прочертили з нашої початкової точки лінію в кінцеву точку, яка знаходиться в зазначених координатах: 150 пікселів від початку полотна по осі x, і 100 - від початку по у. Всі координати вказується щодо верхнього лівого краю полотна, а не того місця, де закінчилася лінія. Запам'ятайте це, тому що це відразу спрощує розуміння і ви вже в голові зможете уявити собі результат.
Власне, метод closePath () завершує малювання фігури, його вказуємо після останньої намальованої лінії. Інші параметри:
lineWidth = 3; - товщина лінії 3 пікселя;
strokeStyle = 'silver'; - колір лінії срібний;
stroke (); - УВАГА! Без цього методу в кінці наші лінії не відобразяться і трикутник НЕ буде видно. Тому прописуємо його обов'язково.
Цікаве зі світу сайтобудування
Ви підписалися. Дякую.