画布实现动态太极图, 旋转太极图

最新推荐文章于 2024-07-20 17:03:08 发布

橙程橙

最新推荐文章于 2024-07-20 17:03:08 发布

阅读量1.7k

点赞数 3

分类专栏：乱七八糟文章标签：画布 html canvas

本文链接：https://blog.csdn.net/rolinabc/article/details/101028909

版权

乱七八糟专栏收录该内容

11 篇文章 1 订阅

订阅专栏

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>太极图</title>
	<style type="text/css">
		canvas{
			/*border: 1px solid red;*/
			animation-name: move;
			animation-duration: 1s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}

		@keyframes move{
			0%{
				transform: rotate(0deg);
			}
			100%{
				transform: rotate(360deg);
			}
		}

	</style>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.getElementById('canvas')
			var context = canvas.getContext('2d')
			// 大圆
			context.beginPath()
			// Math.PI   Math.PI*3/2   270度
			context.arc(200,200,200,Math.PI/2,Math.PI*3/2)
			context.closePath()
			context.fillStyle = 'black'
			context.fill()

			context.beginPath()
			// Math.PI   Math.PI*3/2   270度
			context.arc(200,200,200,Math.PI*3/2,Math.PI/2)
			context.closePath()
			context.fillStyle = 'red'
			context.fill()

			// 中圆
			context.beginPath()
			// Math.PI   Math.PI*3/2   270度
			context.arc(200,100,100,0,Math.PI*2)
			context.closePath()
			context.fillStyle = 'black'
			context.fill()

			context.beginPath()
			// Math.PI   Math.PI*3/2   270度
			context.arc(200,300,100,0,Math.PI*2)
			context.closePath()
			context.fillStyle = 'red'
			context.fill()

			// 小圆
			context.beginPath()
			// Math.PI   Math.PI*3/2   270度
			context.arc(200,300,20,0,Math.PI*2)
			context.closePath()
			context.fillStyle = 'black'
			context.fill()

			context.beginPath()
			// Math.PI   Math.PI*3/2   270度
			context.arc(200,100,20,0,Math.PI*2)
			context.closePath()
			context.fillStyle = 'red'
			context.fill()
			

		}
	</script>
</head>
<body>
	<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>