Łuk koła i wycinek koła (1) (HTML5 canvas)

Łuk koła i wycinek koła (1)

Łuk rysujemy używając polecenia arc(x0, y0, r, αs, αe, counterClockwise)

gdzie:

x₀ i y₀ oznaczają współrzędne środka koła, którego łuk lub wycinek rysujemy

r – to promień koła, którego łuk lub wycinek rysujemy.

α_s – to kąt początkowy łuku

α_e – to kąt końcowy łuku

counterClockwise – kierunek rysowania. Są dwie możliwości:

• true – gdy kierunek rysowania jest przeciwny do ruchu wskazówek zegara
• false – gdy kierunek rysowania jest zgodny z ruchem wskazówek zegara

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	ctx.beginPath();
	var x = 100;
	var y = 75;
	var radius = 50;
	var startAngle = 1.5*Math.PI;
	var endAngle = 0;
	var counterClockwise = false;
	ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
	ctx.lineWidth = 5;
	ctx.strokeStyle = "black";
	ctx.stroke();
	//-
	ctx.beginPath();
	var x = 100;
	var y = 150;
	var radius = 50;
	var startAngle = 1.5*Math.PI;
	var endAngle = 0;
	var counterClockwise = false;
	ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
	ctx.lineTo(x,y);
	ctx.closePath();
	ctx.fillStyle = "#00aaff";
	ctx.fill();
	//-
	ctx.beginPath();
	var x = 100;
	var y = 250;
	var radius = 50;
	var startAngle = 1.5*Math.PI;
	var endAngle = 0;
	var counterClockwise = false;
	ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
	ctx.lineWidth = 5;
	ctx.strokeStyle = "black";
	ctx.stroke();
	ctx.lineTo(x,y);
	ctx.closePath();
	ctx.fillStyle = "#00aaff";
	ctx.fill();
	//-
	ctx.beginPath();
	var x = 200;
	var y = 150;
	var radius = 50;
	var startAngle = 1.5*Math.PI;
	var endAngle = 0;
	var counterClockwise = false;
	ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
	ctx.closePath();
	ctx.fillStyle = "#00aaff";
	ctx.fill();