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

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

gdzie:

x0 i y0 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 (Rys. 1)

α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 (Rys. 2)
  • false – gdy kierunek rysowania jest zgodny z ruchem wskazówek zegara (Rys. 3)
Kąt początkowy łuku
Rys 1. Kąt początkowy łuku
Kierunek rysowania przeciwny do ruchu wskazówek zegara
Rys. 2. Kierunek rysowania przeciwny do ruchu wskazówek zegara
Kierunek rysowania zgodny z ruchem wskazówek zegara
Rys. 3. Kierunek rysowania zgodny z ruchem wskazowek 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();	   
            

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *