рони, спасибо, я используя метод arc сделал, с помощью окружности.
https://jsfiddle.net/m36bkLjh/1/
https://jsfiddle.net/m36bkLjh/2/
<canvas id="canvas" width="400" height="400"></canvas>
<script>
class Circle{
/**
* @param {Canvas} canvas
*/
constructor(canvas){
this.canvas=canvas;
this.radius=canvas.width/2*0.8;
}
/**
* @return {Canvas}
*/
getCanvas(){
return this.canvas;
}
/**
* @param {number} radius
* @return {Circle}
*/
setRadius(radius){
this.radius=radius;
return this;
}
/**
* @return {number}
*/
getRadius(){
return this.radius;
}
/**
* @return {Circle}
*/
draw(){
const cnv=this.getCanvas();
const ctx=cnv.getContext('2d');
const center=[
cnv.width/2,
cnv.height/2
];
ctx.beginPath();
ctx.arc(
center[0],
center[1],
this.getRadius(),
0,
2*Math.PI
);
ctx.stroke();
ctx.fill();
return this;
}
/**
* @param {number} angle
* @return {Circle}
*/
drawSection(angle){
const cnv=this.getCanvas();
const ctx=cnv.getContext('2d');
const center=[
cnv.width/2,
cnv.height/2
];
const radius=this.getRadius();
const x=center[0];
const y=center[1];
angle=(angle%360)/2;
const radian=(180-angle)*Math.PI/180;
const points=[
[
radius*Math.sin(-radian)+x,
radius*Math.cos(-radian)+y,
],
[
radius*Math.sin(radian)+x,
radius*Math.cos(radian)+y,
]
];
ctx.beginPath();
ctx.moveTo(points[0][0],points[0][1]);
ctx.lineTo(x,y);
ctx.lineTo(points[1][0],points[1][1]);
ctx.stroke();
//Заливка
ctx.beginPath();
ctx.fillStyle='#F00';
ctx.strokeStyle='#F00';
ctx.moveTo(x,y);
ctx.lineTo(points[0][0],points[0][1]);
ctx.arc(
x,
y,
radius,
(270-angle)*Math.PI/180,
(angle-90)*Math.PI/180
);
ctx.lineTo(x,y);
ctx.stroke();
ctx.fill();
return this;
}
}
const circle=new Circle(document.getElementById('canvas'));
circle.getCanvas().getContext('2d').fillStyle='#F5F5F5';
circle.draw().drawSection(45);
</script>