Today we will learn how to draw arcs and circles. This can be done using the method arcwhich draws an arc from the center at a given point with coordinates x, y… Depending on the value of the specified angle of the circle, we can get an arc or a full circle. Uses the value to calculate the circumference Math.PI… These shapes will become visible if you apply the methods to them stroke (outline) or (figure).
Draw an arc
Method arc () let’s pass the following parameters:
- X, Y – coordinates of the center of the circle
- radius – radius of the circle
- startAngle – the starting angle of the circle
- endAngle – end angle of the circle
- anticlockwise – drawing direction, false (clockwise)
#drawRound {
width: 600px;
height: 300px;
margin: 40px;
background-image: url(grid.png);
}
// Получение элемента canvas, контекста и свойства Math.PI
let canvas = document.getElementById('drawRound');
let ctx = canvas.getContext('2d');
let pi = Math.PI;
ctx.beginPath();// начало нового пути
ctx.lineWidth = 7; // толщина обводки
ctx.strokeStyle = "green"; // цвет обводки
// Координаты центра круга, радиус, начальный угол, конечный угол, направление по часовой стрелке
ctx.arc(100, 100, 75, 0, pi/2, false );
ctx.stroke();
If we replace false on true, then the direction of sweeping the arc will go counterclockwise.
ctx.arc(100, 100, 75, 0, pi/2, true);
Draw half a circle
The angle of the circle depends on the number PI… Half a circle corresponds to 180 degrees or an integer PI.
ctx.arc(150, 150, 75, 0, pi, true); // против часовой стрелке
ctx.arc(150, 150, 75, 0, pi, false); // по часовой стрелке
Full circle
ctx.beginPath();
ctx.lineWidth = 7;
ctx.strokeStyle = "green";
ctx.fillStyle="yellow";
ctx.arc(150, 150, 85, 0, 2*pi, false);
ctx.stroke();
ctx.fill();
Overlay circles
Nothing prevents you from superimposing circles or arcs on top of each other, just manipulating the coordinates.
ctx.beginPath();
ctx.lineWidth = 7;
ctx.strokeStyle = "green";
ctx.fillStyle="yellow";
ctx.arc(150, 150, 85, 0, 2*pi, false);
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.lineWidth = 7;
ctx.strokeStyle = "gray";
ctx.fillStyle="pink";
ctx.arc(250, 150, 85, 0, 2*pi, false );
ctx.stroke();
ctx.fill();
JavaScript is an amazingly versatile programming language and you can’t do without it in web development. And why resist when there is such a wonderful JavaScript video coursewhere educational material is presented in a simple and understandable language.
Previous article Next article
Copying of materials is allowed only with the indication of the author (Mikhail Rusakov) and an indexed direct link to the site (http://myrusakov.ru)!
Add to my friends VK: http://vk.com/myrusakov.
If you want to rate me and my work, then write it in my group: http://vk.com/rusakovmy.
If you do not want to miss new materials on the site,
then you can subscribe to updates: Subscribe to updates
If you still have any questions, or you have a desire to comment on this article, then you can leave your comment at the bottom of the page.
If you liked the site, then post a link to it (on your site, on the forum, in contact):
-
Button:
It looks like this:
-
Text link:
It looks like this: How to create your website
- BB-code of the link for forums (for example, you can put it in the signature):
