У цьому випадку "намалювати" простеньку картинку можна одразу на веб сторінці засобами Java Script. Розберемося, як це робиться.
Перш за все потрібно підготувати місце для малювання. Таким "мольбертом" на веб-сторінці є спеціальне поле canvas (з англ. - полотно).
Створення полотна
За замовчуванням елемент canvas створює прямокутну область, яка не має ані власного контенту, ані рамок. Основними атрибутами цього елементу є ширина і довжина, якщо вони спеціально не оголошені, то розмір полотна тоді буде 300 рх на 150 рх.
Для розміщення полотна на веб-сторінці записуємо такий код:
<body>
<center>
<canvas id = "sheet" width = "800" height = "500" style = "background: lightblue;"></canvas>
</center>
</body>
В цьому коді по центру сторінки (<center>) розміщується полотно, позначене ідентифікатором sheet (аркуш), шириною 800 і висотою 500 пікселів і зафарбоване блакитним кольором (в принципі, параметр не обов'язковий, це просто для того, щоб наше полотно на сторінці було видно).
З html усе. Вся інша робота виконуватиметься у файлі Java Script.
Зв'язування полотна з Java Script
Java Script розпочинається з команд, які вказують скрипту, з яким об'єктом на веб-сторінці потрібно буде працювати надалі:
var easel = document.getElementById('sheet');
var ctx = easel.getContext('2d');
- Перша змінна easel (з англ. "мольберт") - це безпосереднє зв'язування скрипта з полотном. Об'єкту "sheet", розміщеному на веб-сторінці (document), з якою зв'язаний скрипт і отриманому скриптом по ідентифікатору (getElementById) надається ім'я easel. Завдяки цьому тепер скрипт буде звертатися до цієї змінної, а впливати безпосередньо на об'єкт "sheet" (це і є наше полотно на сторінці), змінюючи його властивості.
- Змінна ctx - це об'єкт, який містить в собі так званий контекст виконання. Метод getContext() має параметр '2d', це означає, що буде використовуватися двовимірний контекст малювання. Все малювання відбуватиметься за допомогою методів цього об'єкта.
Команди початку й завершення малювання
Після того, як скрипт зв'язано з веб-сторінкою, можна розпочинати малювання. Команди малювання замикаються між двома іншими командами початку й завершення малювання:
ctx.beginPath(); /*почати шлях малювання*/
...
ctx.stroke(); /*"підвести риску" - завершити*/
Якщо потрібно відокремити одну лінію від іншої, тоді процес малювання кожної з них обрамлюють в “рамки” beginPath...stroke. Цей підхід дозволяє присвоїти кожній лінії свій колір, товщину і тип закінчення.
Розмітка полотна
Розмітка полотна canvas стандартна для графіки. У лівому верхньому куті - початок координат (0;0). Під час створення об'єктів на полотні зазначаються їх координати відповідно до цієї розмітки.
Малювання
Лінії
Малювання ліній
ctx.moveTo(50, 50); /*перейти в точку (50,50) нічого не малюючи*/
ctx.lineTo(150, 50); /*прокреслити лінію з початком в поточній позиції і кінцем в точці (150,50)*/
Якщо провести аналогію з середовищем Scratch, то moveTo - це просте переміщення в точку з заданими координатами з піднятим олівцем, а lineTo - це вже опустити олівець і рухатися з опущеним олівцем, промальовуючи в цей час лінію.
Очевидно, для того, щоб намалювати ламану лінію слід записати підряд потрібну кількість команд lineTo, щоразу зазначаючи координати кінця відрізка.
Зміна товщини ліній
ctx.lineWidth = 10; /*товщина лінії у пікселях*/
Колір ліній
ctx.strokeStyle = "..."
Колір лінії може бути заданий не тільки безпосередньою вказівкою на назву кольору, а й за допомогою CSS-функції rgb(), яка формує колір з зазначеного набору червоного, зеленого та синього:
ctx.strokeStyle = "rgb(16, 155, 252)"
У зазначеній комбінації колір лінії буде ось таким.
Кінці ліній
ctx.lineCap = "..."
/*butt - прямокутні (за промовчанням), round - округлі*/
Геометричні фігури
Будь-який многокутник можна створити як послідовність відрізків. Так, наприклад, трикутник буде зображено після виконання такої послідовності команд:
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 150);
ctx.lineTo(50, 50);
ctx.stroke();
Останню лінію можна не малювати, замінивши ctx.lineTo(50,50) на ctx.closePath(). Метод closePath автоматично замикає ламану.
Отримуємо таке:
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.stroke();
Прямокутник
Щоб створити прямокутник, не обов'язково з'єднувати чотири відрізка. Для малювання прямокутника є спеціальний метод:
ctx.strokeRect(50, 50, 100, 75);
/*координати лівого верхнього кута, ширина, висота*/
Коло
ctx.arc(x,y,radius,startAngle,endAngle,direction)
Метод arc створює дугу з координатами центру x та y, довжиною радіуса radius, початковим кутом startAngle і кінцевим кутом endAngle. Малювання здійснюється проти годинникової стрілки (direction = false за промовчанням, тому для малювання в цьому випадку параметр можна не вказувати) або за годинниковою стрілкою (direction = true).
Слід пам'ятати, що кути при малюванні вимірюють в радіанах. При бажанні можна використати функцію переведення радіан в градуси:
function getRadians(degrees) {
return (Math.PI/180)*degrees;
}
Тоді процедура малювання кола матиме такий вигляд:
ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();
Відповідно, для зображення половини кола:
ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();
Зафарбовування фігур
ctx.fill()
Замикати контур перед зафарбовуванням не обов'язково. Після використання методу fill контур замкнеться автоматично.
За промовчанням колір заливки буде чорним. Якщо потрібен інший колір, тоді:
ctx.fillStyle = 'green';
Можна малювати й зафарбовувати одночасно:
ctx.fillRect(50, 50, 100, 75);
Стирання
ctx.clearRect(x, y, width, height)
Метод очищує прямокутну область і робить її вміст прозорим.
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
Приклади
Світлофор
Прямокутник
Створення прямокутника, розміри і колір якого обирає користувач:
Як бачимо, у створення зображень засобами Java Script немає нічого особливо складного. Найважчою частиною створення зображень є визначення координат, за якими треба розставляти відрізки й фігури. Зазвичай координати просто підбираються. Але і в цьому можна полегшити свою працю якщо використовувати спеціальні розширення для браузера, які дозволяють визначити поточне положення курсора миші. Одним з таких спеціальних розширень є coordinates, яке можна встановити собі з веб-магазину Chrome.