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

CanvasRenderingContext2D.arcTo
Здравствуйте.
С наступающим новым годом.

Помогите закрасить часть окружности, никак не могу сообразить что я делаю не так.
Метод "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>

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