Zielony Smok - logo witryny

Obrót symbolu JinJang

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

Listing

function drawJinJang(x, y, radius, leftColor, rightColor) {
	ctx.translate(x,y);
	ctx.rotate(kat);
	ctx.translate(-x,-y);
	//prawe półkole - czarne
	ctx.save();
	ctx.beginPath();
	var startAngle = 1.5 * Math.PI;
	var endAngle = 0.5 * Math.PI;
	var counterClockwise = false;
	ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
	ctx.lineTo(x, y);
	ctx.closePath();
	ctx.fillStyle = rightColor;
	ctx.fill();
	//lewe pólkole - białe
	ctx.beginPath();
	var startAngle = 1.5 * Math.PI;
	var endAngle = 0.5 * Math.PI;
	var counterClockwise = true;
	ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
	ctx.lineTo(x, y);
	ctx.closePath();
	ctx.fillStyle = leftColor;
	ctx.fill();
	//-
	ctx.beginPath();
	ctx.fillStyle = leftColor;
	ctx.arc(x, y - radius / 2, radius / 2.0, 0, 2 * Math.PI, true);
	ctx.fill();
	//-
	ctx.beginPath();
	ctx.fillStyle = rightColor;
	ctx.arc(x, y + radius / 2, radius / 2.0, 0, 2 * Math.PI, true);
	ctx.fill();
	//-
	ctx.beginPath();
	ctx.fillStyle = rightColor;
	ctx.arc(x, y - radius / 2, radius / 12.0, 0, 2 * Math.PI, true);
	ctx.fill();
	//-
	ctx.beginPath();
	ctx.fillStyle = leftColor;
	ctx.arc(x, y + radius / 2, radius / 12.0, 0, 2 * Math.PI, true);
	ctx.fill();
	//-
	ctx.beginPath();
	ctx.strokeStyle = rightColor;
	ctx.lineWidth=0.5;
	ctx.arc(x, y , radius, 0, 2 * Math.PI, true);
	ctx.stroke();
	ctx.restore();
};
	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	var kat =(2*Math.PI)/360.0;
	var timer = setInterval("drawJinJang(200,160,150, 'white', 'black')", 10);