Canvas之太极图

Posted 16699qq

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

技术图片

以上是关于Canvas之太极图的主要内容,如果未能解决你的问题,请参考以下文章

html5 canvas 绘制太极图

了解canvas的曲线路径,实现的简单太极图

太极八卦图

孙式太极拳的站桩(作者:孙剑云)

画布Canvas的使用方法

五行兼备:联想TruScale服务的太极之道