jQuery-canvas制作太极图_jq 绘制图片-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45758587/article/details/109363356

本文介绍如何利用jQuery和HTML5 canvas元素，结合CSS3动画，创建出动态的太极图效果。详细讲解了绘制过程和关键代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

jQuery-canvas制作太极图

<!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: 3s;/*动画一个周期所需时间*/
			animation-iteration-count: infinite;/*动画无限循环*/
			animation-timing-function: linear;/*规定动画速度的曲线：从头到尾速度相同*/
		}
 
		@keyframes move{
			0%{
				transform: rotate(0deg);/*定义动画旋转，起始为0，结束为360*/
			}
			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 = 'white'
			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 = 'white'
			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 = 'white'
			context.fill()
			
 
		}
	</script>
</head>
<body>
	<canvas id="canvas" width="400px" height="400px"></canvas>
</body>
</html>