HTML5画布小dome八卦图

程序员长海技术 2022年11月19日

0 收藏 969 点赞 4,697 浏览 1195 个字

	<!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>