Показать сообщение отдельно
  #3 (permalink)  
Старый 31.12.2018, 17:48
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,737

рони, спасибо, я используя метод 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>

Последний раз редактировалось Nexus, 31.12.2018 в 17:59.
Ответить с цитированием