test/arc.html at master · chen2017311/test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>

			#cvs{border: 1px solid red;}
		</style>
	</head>
	<body>
		<canvas id="cvs" width="500" height="500"></canvas>
		<script>

			var cvs=document.getElementById("cvs");
			if(cvs.getContext){

			var ctx=cvs.getContext('2d');

			//圆的x y坐标是圆的中心点
			ctx.arc(200,200,100,0,360*(Math.PI/180),false);

			ctx.moveTo(170,145);
			ctx.arc(150,150,20,0,360*(Math.PI/180),false);

			ctx.moveTo(275,145);
			ctx.arc(255,150,20,0,360*(Math.PI/180),false);

			ctx.moveTo(280,200);
			ctx.arc(200,200,80,0,180*(Math.PI/180),false);
			ctx.stroke();

			}
		</script>
	</body>
</html>