Изучаем Canvas. Урок №2 - Рисуем линии и кривые

Линия задается двумя точками на плоскости, для того чтобы в нашем теге canvas нарисовать линию нам понадобятся:

moveTo(x,y);
lineTo(x,y);
stroke();

moveTo(x,y) — это метод, который определяет начальное положение курсора, исходное положение
lineTo(x,y) — создает связь между исходным положением и заданным, прокладывает вектор
stroke() — рисует по заданному пути линией. По умолчанию — черной, толщиной в 1 пиксель.

<html>
<head>
<script>
 
function drawLine() {
	var canvas=document.getElementById("myCanvas");
	var line=canvas.getContext("2d");
 
	line.moveTo(100,100);
	line.lineTo(200,200);
	line.stroke();	
}
 
</script>
</head>
<body onload="drawLine()">
	<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>

Рассмотрим свойства, которыми мы можем наделить нашу прямую:
  • lineWidth(x) — Задает ширину в пикселях
  • strokeStyle="#ffffff" — Цвет
  • lineCap="" — Определяет стиль прямой — butt(по умолчанию), square и round. Тут стоит отметить что при round и square длина прямой увеличивается на ширину самой прямой, т.к. каждая «кепка» имеют длину равную половине ширине прямой.

Рисуем дугу.

arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);


Давайте разберем в подробностях каждый передаваемый параметр в скобках. centerX и centerY — точка, где находится центр дуги. startingAngle — начальный угол. endingAngle — конечный, antiClockwise — направление по часовой или нет(true/false).



<script>
 
function drawArc() {
	var canvas=document.getElementById("myCanvas");
	var c=canvas.getContext("2d");
 
	var centerX = 288;
	var centerY = 125;
	var radius= 75;
	var startingAngle = 0 * Math.PI;
	var endingAngle = 1.5 * Math.PI;
	var counterclockwise = false;
 
	c.arc(centerX,centerY, radius, startingAngle, 
		endingAngle,counterclockwise);
	c.lineWidth=15;
	c.strokeStyle="black"; // line color
	c.stroke();	
}
 
</script>
  • нет
  • avatar
  • 0

0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.