闲来无写的，就是中间有一条小细线，求大神指点。

最新推荐文章于 2021-08-15 11:09:18 发布

王爷的大房子

最新推荐文章于 2021-08-15 11:09:18 发布

阅读量73

点赞数

原文链接：http://www.cnblogs.com/haotian-dada666/p/5799997.html

版权

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title></title>
	</head>

	<body>
	<canvas id="canvas" width="500" height="500"></canvas>
	<script type="text/javascript">
	var oC = document.getElementById("canvas");
	var ctx = oC.getContext("2d");

	ctx.translate(250,250);
	function autoplay() {
	// 左边
	ctx.beginPath();
	ctx.fillStyle = "black";
	ctx.arc(0, 0, 200, Math.PI * 0.5, Math.PI * 1.5, false);
	ctx.fill();
	ctx.closePath();


	// 右边
	ctx.beginPath();
	ctx.fillStyle = "white";
	ctx.strokeStyle = "black";
	ctx.arc(0, 0, 200, Math.PI * 1.5, Math.PI * 0.5, false);
	ctx.fill();
	ctx.stroke();
	ctx.closePath();
	// 小大的
	ctx.beginPath();
	ctx.fillStyle = "white";
	ctx.arc(0, -100, 100, Math.PI * 0.5, Math.PI * 1.5, false);
	ctx.fill();
	ctx.closePath();

	ctx.beginPath();
	ctx.fillStyle = "black";
	ctx.arc(0, 100, 100, Math.PI * 1.5, Math.PI * 0.5, false);
	ctx.fill();
	//小小的
	ctx.beginPath();
	ctx.fillStyle = "white";
	ctx.arc(0, 100, 35, 0, Math.PI * 2, false);
	ctx.fill();
	ctx.closePath();

	ctx.beginPath();
	ctx.fillStyle = "black";
	ctx.arc(0, -100, 35, 0, Math.PI * 2, false);
	ctx.fill();
	ctx.closePath();
	}


	var deg = 0;
	// setInterval(function(){
	// deg += Math.PI / 6;
	// // 清空
	// ctx.clearRect(-250,-250,500,500);
	// ctx.rotate(Math.PI / 100);
	// autoplay();
	// },20)


	// function move(){
	// deg = Math.PI / 6;
	// // 清空
	// ctx.clearRect(-250,-250,500,500);
	// ctx.rotate(Math.PI / 100);
	// autoplay();
	// setTimeout(move,100);
	// }
	// move();
	function move(){
	deg = Math.PI / 6;
	// 清空
	ctx.clearRect(-250,-250,500,500);
	ctx.rotate(Math.PI / 100);
	autoplay();
	// 当浏览器渲染刷新的时候调用
	window.requestAnimationFrame(move);
	}
	move();
	</script>
	</body>

	</html>