Rozeta czterolistna (HTML5 canvas)

Rozeta czterolistna

Rozeta czterolistna jest określona równaniem parametrycznym:

x=2αsinφcos²φ

y=2αsin²φcosφ

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

Listing

var rozeta4listna = function(size, liczbaPunktow, strokeStyle) {
	ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = strokeStyle;
	ctx.translate(w / 2, h / 2);
	var x1 = 0;
	var y1 = 0;
	var x2;
	var y2;
	for ( var i = 0; i < liczbaPunktow; i++) {
		var t = i * Math.PI / 360;
		x2 = 2 * size * Math.sin(t) * Math.pow(Math.cos(t), 2);
		y2 = 2 * size * Math.cos(t) * Math.pow(Math.sin(t), 2);
		ctx.moveTo(Math.floor(x1), Math.floor(y1));
		ctx.lineTo(Math.floor(x2), Math.floor(y2));
		x1 = x2;
		y1 = y2;
	}
	ctx.stroke();
	ctx.restore();
};
	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	var w = cv.width;
	var h = cv.height;
	rozeta4listna(100, 1000, "green");