HTML5画布小dome八卦图

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

donghe2023

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

阅读量226

点赞数

文章标签： javascript ViewUI

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

版权

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