Zielony Smok

HTML5 canvas – tutorial

Kardioida

Kardioida jest opisana równaniem parametrycznym:

x=a(2cost-cos2t)

y=a(2sint-sin2t)

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

Listing

var kardioida = function(a, liczbaPunktow, strokeStyle) {
	ctx.save();
	ctx.beginPath();
	ctx.strokeStyle = strokeStyle;
	ctx.translate(w / 2, h / 2);
	var x2;
	var y2;
	for ( var i = 0; i < liczbaPunktow; i++) {
		var t = i * Math.PI / 360;
		x2 = a * (2 * Math.cos(t) - Math.cos(2 * t));
		y2 = a * (2 * Math.sin(t) - Math.sin(2 * t));
		ctx.lineTo(Math.floor(x2), Math.floor(y2));
	}
	ctx.stroke();
	ctx.restore();
};
	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	var w = cv.width;
	var h = cv.height;
	kardioida(50, 1000, "red");