Program rysujący gwiazde (JS+CANVAS) - wyjasnienie dziłania

Question

function RysujGwiazde(cx, cy, ilosc_rogow, zewnetrzny_promien, wewnetrzny_promien) {
                var ctx = document.getElementById("my_canvas").getContext('2d');

                var rot = Math.PI / 2 * 3;
                
                var x = cx;
                
                var y = cy;
                var step = Math.PI / ilosc_rogow;
                

                ctx.strokeSyle = "#000";
                ctx.beginPath();
                ctx.moveTo(cx, cy - zewnetrzny_promien);
                for (i = 0; i < ilosc_rogow; i++) {
                    x = cx + Math.cos(rot) * zewnetrzny_promien;
                    y = cy + Math.sin(rot) * zewnetrzny_promien;
                    ctx.lineTo(x, y);
                    rot = rot + step;

                    x = cx + Math.cos(rot) * wewnetrzny_promien;
                    y = cy + Math.sin(rot) * wewnetrzny_promien;
                    ctx.lineTo(x, y);
                    rot = rot + step;
                }
                ctx.lineTo(cx, cy - zewnetrzny_promien);
                ctx.closePath();
                ctx.lineWidth = 5;
                ctx.strokeStyle = '#f2ac31';
                ctx.stroke();
                ctx.fillStyle = 'yellow';
                ctx.fill();

            }

 RysujGwiazde(100,100,5,10,30);

Prosze o wyjasnienie dziłania tego programu, został on lekko zmodyfikowany (zrodlo stackoverflow)

 

Answer 1

function RysujGwiazde(cx, cy, ilosc_rogow, zewnetrzny_promien, wewnetrzny_promien) {
	var ctx = document.getElementById("my_canvas").getContext('2d'); // pobieramy kontekst canvas do rysowania

	var rot = Math.PI / 2 * 3; // kąt rozwarcia gwiazdy (?)

	var x = cx; // punkt początkowy na osi X (ctx służy jako układ współrzędnych)

	var y = cy; // punkt początkowy na osi Y
	var step = Math.PI / ilosc_rogow; // co ile ma być kolejny czubek

	ctx.strokeSyle = "#000"; // jaki kolor ma mieć kontur
	ctx.beginPath(); // zaczęcie rysowania (rozpoczęcie ścieżki)
	ctx.moveTo(cx, cy - zewnetrzny_promien); // narysowanie pierwszej linii
	// cała pętla to rysowanie poszczególnych czubków – de facto czysta matematyka
	for (i = 0; i < ilosc_rogow; i++) {
		x = cx + Math.cos(rot) * zewnetrzny_promien;
		y = cy + Math.sin(rot) * zewnetrzny_promien;
		ctx.lineTo(x, y);
		rot = rot + step;
 
		x = cx + Math.cos(rot) * wewnetrzny_promien;
		y = cy + Math.sin(rot) * wewnetrzny_promien;
		ctx.lineTo(x, y);
		rot = rot + step;
	}
	ctx.lineTo(cx, cy - zewnetrzny_promien); // narysowanie ostatniej linii…
	ctx.closePath(); // …i zakończenie rysowania (zamknięcie ścieżki)
	ctx.lineWidth = 5; // ustawienie nowej grubości linii…
	ctx.strokeStyle = '#f2ac31'; // …i jej koloru
	ctx.stroke(); // narysowanie jej
	ctx.fillStyle = 'yellow'; // ustawienie koloru wypełnienia
	ctx.fill(); // wypełnienie przygotowanego konturu
 
}

W sumie to jest głównie matematyka, nie JS ;)

Comments

Dzieki bardzo, a dalbys rade pomoc mi w animacji tej gwiazdy ?

Potrzebuje zeby krecila sie wzgledem swojego srodka.

---

Bardzo dawno nic nie pisałem na canvas, więc średnio… Zresztą: tu trzeba dużo liczyć ;) Nie wiem, czy nie szybciej byłoby Ci to zrobić na SVG + CSS. Jeśli jednak chcesz na canvas, to zapoznaj się z requestAnimationFrame.