Symbol Jin Jang (HTML5 canvas)

Symbol JinJang

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

Listing

function drawJinJang(x, y, radius, leftColor, rightColor) {
	//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");
	drawJinJang(200, 160, 150, "white", "black");