HTML Canvas Координати
Canvas Координати
HTML Canvas – це двовимірна сітка.
Верхній лівий кут полотна має координати (0,0)
У попередньому розділі ви бачили використання цього методу: fillRect(0,0,150,75).
Це означає: почніть із верхнього лівого кута (0,0) і намалюйте прямокутник 150x75 пікселів.
Приклад координат
Наведіть курсор миші на прямокутник нижче, щоб побачити його координати x та y:
Намалювати лінію
Щоб намалювати пряму лінію на полотні (canvas), скористайтеся наведеними нижче методами:
- moveTo(x,y) - визначає початкову точку лінії
- lineTo(x,y) - визначає кінцеву точку лінії
Щоб фактично намалювати лінію, ви повинні використати один із методів "чорнила"и, наприклад stroke().
Приклад
Визначте початкову точку в позиції (0,0), а кінцеву точку в позиції (200,100). Потім використовуйте метод stroke(), щоб фактично намалювати лінію:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Спробуйте самі »
Намалювати коло
Щоб намалювати коло на полотні (в Canvas), скористайтеся наведеними нижче методами:
- beginPath() - почати шлях
- arc(x,y,r,startangle,endangle) - створити дугу/криву. Щоб створити коло за допомогою arc(): встановіть початковий кут на 0 та кінцевий кут на 2*Math.PI. Параметри x та y визначають координати x та y центрі кола. Параметр r визначає радіус кола.
Приклад
Визначте коло за допомогою методу arc(). Потім використовуйте метод stroke(), щоб фактично намалювати коло:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
Спробуйте самі »
