Spirala kwadratowa (HTML5 canvas)

Spirala kwadratowa

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

Listing

		/**
			 * lg - długość pierwszego odcinka
			 * xx  - współrzędna x punktu startowego
			 * yy  - współrzędna y punktu startowego
			 * alfa - odleglosc między skrętami
			 */
function spiralaKwadratowa(ctx, lg, xx, yy, alfa) {
	if (lg > 0) {
		ctx.moveTo(xx, yy);
		ctx.lineTo(xx + lg, yy);//1 linia
		ctx.lineTo(xx + lg, yy + lg);//2 linia
		ctx.lineTo(xx + alfa, yy + lg);//3 linia
		ctx.lineTo(xx + alfa, yy + alfa);//4 linia
		spiralaKwadratowa(ctx, lg - 2 * alfa, xx + alfa, yy + alfa,
				alfa);//nastepny segment
	}
}
var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.beginPath();
spiralaKwadratowa(ctx, 450, 10, 10, 10);
ctx.stroke();
ctx.restore();