绘制弧形和圆形

最新推荐文章于 2024-02-21 05:43:01 发布

原创最新推荐文章于 2024-02-21 05:43:01 发布 · 134 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

<!DOCTYPE html>
<!-- circle.html A document for circle.js -->
<html lang="en">
	<head>
		<title>circles.html</title>
		<meta charset="utf-8"/>
		<script type="text/javascript" src="circles.js"></script>
	</head>
	<body onload="draw()">
		<canvas id="myCanvas" width="800" height="400" style="color:#b8b7b6"/>
	</body>
</html>
function draw(){
	var dom =document.getElementById("myCanvas");
	if (dom.getContext){
		var context=dom.getContext('2d');
// Draw the outer stroke circles
	context.beginPath();
	context.arc(420,320,100,0,2*Math.PI,false);
	context.stroke();
// Draw the inner filled circle
	context.beginPath();
	context.fillStyle="#60cc68";
	context.arc(420,320,50,0,2*Math.PI,false);
	context.fill();
// Draw Pac-Man
	context.beginPath();
	context.arc(500,200,50,Math.PI/7,-Math.PI/7,false);
	context.lineTo(500,200);
	context.lineTo(500+53*Math.cos(Math.PI/7),200+53*Math.sin(Math.PI/7));
	context.fillStyle="#60cc68";
	context.strokeStyle="#60cc68";
	context.lineWidth=6;
	context.stroke();
	context.fill();
// Draw eyes
	context.beginPath();
	context.fillStyle="#0c9eca";
	context.arc(500+5,200-25,8,0,2*Math.PI,false);
	context.fill();
	}
}

标签