Рисуване на линии чрез canvas в JavaScript
Да започнем с нещо просто - с рисуване на линии. За да разберем как става, представете си, че имате лист хартия и молив. Вие можете да рисувате върху този лист, или може да премествате молива до желаната точка без да рисувате.
По същия начин работи и JavaScript: той има
молив (или перо за рисуване), до желаното
място можете да го преместите с помощта на
метода moveTo, а да рисувате - с помощта на
метода lineTo.
И двата метода приемат като параметри точката, в
която да се премести върхът на пера - първият параметър
координатата по хоризонтала, а вторият - по
вертикала. Началото на координатната система - точка 0,
0 - това е горният ляв ъгъл на елемента.
Когато перото се премества до желаната точка -
методът moveTo просто премества, а
lineTo в процеса на преместване рисува
линия от текущата позиция на пера до точката,
в която то ще се премести.
Въпреки това, ако стартирате горния код
- нищо няма да се случи: необходимо е да се напишат
още две команди: първата команда beginPath
трябва да бъде указана преди началото на рисуването на
линията, а втората команда stroke трябва
да бъде извикана след всички комбинации от moveTo
и lineTo, за да се нарисува линията.
И така, нека напишем работещ код за рисуване на линия:
Нека нарисуваме линия
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Нека нарисуваме птичка
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Нека нарисуваме триъгълник
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Нека нарисуваме квадрат
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Затваряне на фигури
За рисуване на затворена фигура не е задължително
да се правят всички линии - последната линия може
да се нарисува автоматично и да затвори фигурата.
За това преди метода stroke следва
да се извика методът closePath.
Този метод се опитва да затвори фигурата, като рисува права линия от крайната точка до началната. Ако фигурата вече е била затворена или представлява просто точка, тогава методът не прави нищо.
Нека нарисуваме триъгълник, използвайки closePath:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - пропускаме тази стъпка
ctx.closePath();
ctx.stroke();
:
Запълване на фигури
Вместо метода stroke може да се използва
методът fill - при това фигурата не е задължително
да бъде напълно затворена - тя ще се запълни
и така:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - пропускаме тази стъпка
//ctx.closePath(); - и тази също
ctx.fill();
:
