HTML5中的canvas画圆饼 示例

效果如下:

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background: black;
			}
			canvas{
				background: #fff;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="400" height="400"></canvas>
		<script>
			var ctx = document.getElementById("canvas")
			var oC = ctx.getContext("2d")
			
			oC.beginPath()
			oC.moveTo(100,100)
			oC.arc(100,100,60,-90*Math.PI/180,45*Math.PI/180);
			oC.closePath()
			oC.stroke()
			oC.fillStyle = "red"
			oC.fill()
			
			oC.beginPath()
			oC.moveTo(100,100)
			oC.arc(100,100,60,45*Math.PI/180,160*Math.PI/180);
			oC.closePath()
			oC.stroke()
			oC.fillStyle = "green"
			oC.fill()
			
			oC.beginPath()
			oC.moveTo(100,100)
			oC.arc(100,100,60,160*Math.PI/180,-90*Math.PI/180);
			oC.closePath()
			oC.stroke()
			oC.fillStyle = "blue"
			oC.fill()
			
			
		</script>
	</body>
</html>

-------谢谢------

猜你喜欢

转载自blog.csdn.net/this_name_true/article/details/82801118