Здравствуйте.
С наступающим новым годом.
Помогите закрасить часть окружности, никак не могу сообразить что я делаю не так.
Метод "drawSection".
Заранее благодарю.
https://jsfiddle.net/m36bkLjh/
<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=180-angle/2;
const points=[
[
radius*Math.sin(-angle*Math.PI/180)+x,
radius*Math.cos(-angle*Math.PI/180)+y,
],
[
radius*Math.sin(angle*Math.PI/180)+x,
radius*Math.cos(angle*Math.PI/180)+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.arcTo(
points[0][0],
points[0][1],
points[1][0],
points[1][1],
radius
);
//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>