HTML5画布小dome八卦图

最新推荐文章于 2021-07-09 22:39:00 发布

转载最新推荐文章于 2021-07-09 22:39:00 发布 · 273 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ylq818/p/10531299.html

文章标签：

本文详细介绍了一个使用HTML5 Canvas API绘制动态八卦图的过程。通过CSS3动画实现旋转效果，JavaScript则负责绘制八卦图的各个元素，包括外圆、阴阳鱼、内圈及小圆点。文章提供了完整的代码示例，展示了如何利用Canvas的绘图方法如arc()和fill()来创建复杂的图形。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>

	<style type="text/css">
	#BAgua{
	width: 300px;
	height: 300px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	#mycanvas {
	animation: 2s zhuan infinite linear;
	}
	@keyframes zhuan {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
	}
	</style>
	</head>
	<body>
	<div id="BAgua">
	<canvas id="mycanvas" width="200" height="200"></canvas>
	</div>
	</body>
	</html>
	<script type="text/javascript">
	var bag=document.getElementById("mycanvas");
	var ctx =bag.getContext("2d");

	ctx.beginPath();//开始一条路径
	ctx.arc(100,100,100,0,Math.PI*2);//绘制原型
	ctx.stroke();

	ctx.beginPath();
	ctx.arc(100,100,100,Math.PI0.5,Math.PI1.5);
	ctx.fillStyle="black";
	ctx.fill();

	ctx.beginPath();
	ctx.arc(100,50,50,Math.PI0.5,Math.PI1.5);
	ctx.stroke();
	ctx.fillStyle="white";
	ctx.fill();

	ctx.beginPath();
	ctx.arc(100,150,50,Math.PI0.5,Math.PI1.5,true);
	ctx.stroke();
	ctx.fillStyle="black";
	ctx.fill();

	ctx.beginPath();
	ctx.arc(100,50,10,0,Math.PI*2);
	ctx.stroke();
	ctx.fillStyle="black";
	ctx.fill();

	ctx.beginPath();
	ctx.arc(100,150,10,0,Math.PI*2);
	ctx.stroke();
	ctx.fillStyle="white";
	ctx.fill();


	</script>