canvas之太极图

最新推荐文章于 2022-11-27 20:00:00 发布

是小小源啊

最新推荐文章于 2022-11-27 20:00:00 发布

阅读量125

点赞数 1

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/heartzzzz/article/details/109265112

版权

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	*{
	margin: 0;
	padding: 0;
	}
	body{
	background: rgb(150, 128, 82);
	}
	.can{
	margin: 60px 500px;
	animation: round 5s linear infinite;
	}
	@keyframes round{
	0%{transform: rotate(0deg);}
	50%{transform: rotate(180deg);}
	100%{transform: rotate(360deg);}
	}
	</style>
	</head>
	<body>
	<canvas class="can" width="500px" height="500px"></canvas>

	<script>
	let cas = document.querySelector('.can').getContext('2d')

	// cas.beginPath()
	// cas.arc(250,250,250,Math.PI1/2,Math.PI3/2)
	// cas.fill()

	// cas.beginPath()
	// cas.arc(250,250,250,Math.PI3/2,Math.PI1/2)
	// cas.fillStyle = "#fff"
	// cas.fill()

	// cas.beginPath()
	// cas.arc(250,125,125,0,Math.PI*2)
	// cas.fillStyle = "#000"
	// cas.fill()

	// cas.beginPath()
	// cas.arc(250,375,125,0,Math.PI*2)
	// cas.fillStyle = "#fff"
	// cas.fill()

	// cas.beginPath()
	// cas.arc(250,125,40,0,Math.PI*2)
	// cas.fillStyle = "#fff"
	// cas.fill()

	// cas.beginPath()
	// cas.arc(250,375,40,0,Math.PI*2)
	// cas.fillStyle = "#000"
	// cas.fill()

	function arc(cas,x,y,r,start,end,color){
	cas.beginPath()
	cas.arc(x,y,r,start,end)
	cas.fillStyle = color
	cas.fill()
	}

	arc(cas,250,250,250,Math.PI1/2,Math.PI3/2,'#000')
	arc(cas,250,250,250,Math.PI3/2,Math.PI1/2,'#fff')
	arc(cas,250,125,125,0,Math.PI*2,'#000')
	arc(cas,250,375,125,0,Math.PI*2,'#fff')
	arc(cas,250,125,40,0,Math.PI*2,'#fff')
	arc(cas,250,375,40,0,Math.PI*2,'#000')
	</script>
	</body>
	</html>

关注