效果如下:
代码如下:
<!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>
-------谢谢------