Obrót symbolu JinJang
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);