JSFiddle - React, Tailwind, and code Playground

by Kang Yuan

HTML

<canvas id="face" width="200" height="200"></canvas>

JavaScript

var canvas = document.getElementById("face");
		var cxt = canvas.getContext('2d');
		var r = 100;   //半径
		var pointX = 0;  //圆心x坐标
		var pointY = 0; //圆心y坐标

		function pie (g,radius,startAngle,endAngle,color,x,y) 
		{
			g.fillStyle = color;
			g.beginPath();
			g.arc(x,y,radius,startAngle,endAngle,true);
			g.closePath();
			g.fill();
		}

		var q = 0;
		function redrawTaiji()
		{
			cxt.save();
			cxt.clearRect(0,0,canvas.width,canvas.height);
			cxt.translate(100,100);
			q += Math.PI / 6;
			cxt.rotate(q);
			cxt.beginPath();
			pie(cxt,r,3/4*Math.PI*2,5/4*Math.PI*2,"#FF072A",pointX,pointY);
			pie(cxt,r,1/4*Math.PI*2,3/4*Math.PI*2,"#195089",pointX,pointY);
			pie(cxt,r/2,0,Math.PI*2,"#FF072A",pointX,pointY+r/2);
			pie(cxt,r/2,0,Math.PI*2,"#195089",pointX,pointY-r/2);
			pie(cxt,r/4,0,Math.PI*2,"#FF072A",pointX,pointY-r/2);
			pie(cxt,r/4,0,Math.PI*2,"#195089",pointX,pointY+r/2);
			cxt.closePath();
			cxt.restore();
		}
		function initTaiji()
		{
			redrawTaiji();
			setInterval(redrawTaiji,500);
		}
		initTaiji();