Canvas之太极图 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			canvas{
				border: 1px solid red;
			}
		</style>
	</head>
	<body style="background-color: blanchedalmond;">
		<canvas id="canvas" width="500px" height="500px"></canvas>
	</body>
	<script type="text/javascript">
		var canvas=document.getElementById("canvas");
		var context=canvas.getContext('2d');		 
		var x=canvas.width/2;
		var y=canvas.height/2;
		var r=200;
		//右边的黑圆
		context.beginPath();
		context.arc(x,y,r,-0.5*Math.PI,0.5*Math.PI,false)
		context.lineTo(x,y)
		context.fillStyle="black";
		context.fill();	
		context.closePath();
		//左边的白圆
		context.beginPath();
		context.arc(x,y,r,0.5*Math.PI,1.5*Math.PI,false)
		context.lineTo(x,y)
		context.fillStyle="white";
		context.fill();	
		context.closePath();
		//上方的白球 
		context.beginPath();
		context.arc(x,y-(r/2),r/2,0,2*Math.PI,false)
		context.lineTo(x,y)
		context.fillStyle="white";
		context.fill();	
		context.closePath();
		//下方的黑球
		context.beginPath();
		context.arc(x,y+(r/2),r/2,0,2*Math.PI,false)
		context.lineTo(x,y)
		context.fillStyle="black";
		context.fill();	
		context.closePath();
		//上方的黑球
		context.beginPath();
		context.arc(x,y-(r/2),r/6,0,2*Math.PI,false)
		context.lineTo(x,y)
		context.fillStyle="black";
		context.fill();	
		context.closePath();
		//下方白球
		context.beginPath();
		context.arc(x,y+(r/2),r/6,0,2*Math.PI,false)
		context.lineTo(x,y)
		context.fillStyle="white";
		context.fill();	
		context.closePath();
	</script>
</html>

posted @ 2020-06-18 20:38  忘山川  阅读(135)  评论(0)  编辑  收藏  举报