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");


//x, y położenie pierwszego elementu
//len - długość boku pierwszego kwadratu w pikselach;
//n - liczba kwadratów
var rectFibo = function(ctx, x, y, len, n) {
	var fibos = new Array(1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89,
			144, 233);
	if (n == 1) {
		ctx.strokeRect(x + len, y, len * fibos[0], len * fibos[0]);
	} else if (n == 2) {
		ctx.strokeRect(x + len, y, len * fibos[0], len * fibos[0]);
		ctx.strokeRect(x, y, len * fibos[1], len * fibos[1]);
	} else {
		ctx.strokeRect(x + len, y, len * fibos[0], len * fibos[0]);
		ctx.strokeRect(x, y, len * fibos[1], len * fibos[1]);
		//-
		for (var i = 2; i < n; i = i + 4) {
			ctx.strokeRect(x, y = y + len * fibos[i - 1], len
					* fibos[i], len * fibos[i]);
			ctx.strokeRect(x = x + len * fibos[i], y = y - len
					* fibos[i - 1], len * fibos[i + 1], len
					* fibos[i + 1]);
			ctx.strokeRect(x = x - len * fibos[i], y = y - len
					* fibos[i + 2], len * fibos[i + 2], len
					* fibos[i + 2]);
			ctx.strokeRect(x = x - len * fibos[i + 3], y, len
					* fibos[i + 3], len * fibos[i + 3]);//8
		}

	}

};

var spiralFibo = function(ctx, x, y, len, n) {
	var fibos = new Array(1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89,
			144, 233);				
	if (n == 1) {
		ctx.beginPath();
		ctx.arc(x + len, y + len, fibos[0] * len - 1,
				1.5 * Math.PI, Math.PI, true);
		ctx.stroke();
	} else if (n == 2) {
		ctx.beginPath();
		ctx.arc(x + len, y + len, fibos[0] * len - 1,
				1.5 * Math.PI, Math.PI, true);
		ctx.stroke();
		ctx.beginPath();
		ctx.arc(x + len, y + len, fibos[1] * len - 1, 0,
				1.5 * Math.PI, true);
		ctx.stroke();
	} else {					
		ctx.beginPath();
		ctx.arc(x + len, y + len, fibos[0] * len - 1,
				1.5 * Math.PI, Math.PI, true);
		ctx.stroke();					
		ctx.beginPath();
		ctx.arc(x + len, y + len, fibos[1] * len - 1, 0,
				1.5 * Math.PI, true);
		ctx.stroke();
		//-
		for (var i = 2; i < n; i = i + 4) {						
			ctx.beginPath();
			y=y+len*fibos[i-1];
			ctx.arc(x + fibos[i] * len, y, fibos[i] * len - 1,
					Math.PI, 0.5 * Math.PI, true);
			ctx.stroke();					
			ctx.beginPath();
			x=x+len*fibos[i];
			y = y - len*fibos[i-1];
			ctx.arc(x, y, fibos[i + 1] * len - 1, 0.5 * Math.PI, 0,
					true);
			ctx.stroke();						
			ctx.beginPath();
			x = x - len * fibos[i];
			y = y - len	* fibos[i + 2];
			ctx.arc(x, y + fibos[i + 2] * len, fibos[i + 2] * len
					- 1, 0, 1.5 * Math.PI, true);
			ctx.stroke();						
			ctx.beginPath();
			x = x - len * fibos[i + 3];
			ctx.arc(x + fibos[i + 3] * len, y + fibos[i + 3] * len,
					fibos[i + 3] * len - 1, 1.5 * Math.PI, Math.PI,
					true);
			ctx.stroke()

		}

	}

};
ctx.strokeStyle = "green";
ctx.lineWidth = 1;			
rectFibo(ctx,700,700,10,10);
ctx.strokeStyle="magenta";			
spiralFibo(ctx, 700, 700, 10, 10);
            

Dodaj komentarz

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