扇形，就是一个不完整的圆，提到圆，我们就能马上想到用arc方法来画。的确，arc可以画出扇形的弧线，但光是靠arc我们是不能画出扇形的，下面列举画扇形详解，直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
background: #1E90FF;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var cv = canvas.getContext('2d');
// 开启路径
cv.beginPath();
// 定义笔触开始的地方
cv.moveTo(300,220);
// 定义扇形的路径 半径200 60度开始，120度结束，这个扇形60度
cv.arc(300,220,200,60*Math.PI/180,120*Math.PI/180)
// 设置圆形 圆的坐标距离左边400,上面300,半径100 角度,弧度 0*math.PI/180,360*Math.PI/180
// cv.arc(400,300,100,0*Math.PI/180,360*Math.PI/180);
// 指定填充颜色
cv.fillStyle = 'yellow';
// 图开填充
cv.fill();
// 开启路径
cv.beginPath();
// 定义笔触开始的地方
cv.moveTo(300,220);
// 定义扇形的路径 半径200 120度开始，200度结束，这个扇形80度
cv.arc(300,220,200,120*Math.PI/180,200*Math.PI/180)
// 指定填充颜色
cv.fillStyle = 'palegreen';
// 图开填充
cv.fill();
// 开启路径
cv.beginPath();
// 定义笔触开始的地方
cv.moveTo(300,220);
// 定义扇形的路径 半径200 200度开始，290度结束，这个扇形90度
cv.arc(300,220,200,200*Math.PI/180,290*Math.PI/180)
// 指定填充颜色
cv.fillStyle = 'blue';
// 图开填充
cv.fill();
// 开启路径
cv.beginPath();
// 定义笔触开始的地方
cv.moveTo(300,220);
// 定义扇形的路径 半径200 290度开始，420度结束，这个扇形150度
cv.arc(300,220,200,290*Math.PI/180,420*Math.PI/180)
// 指定填充颜色
cv.fillStyle = 'pink';
// 图开填充
cv.fill();
</script>
</body>
</html>
上面代码图片效果：
注意：上面代码中已经有详细注释，但我还要说几句。函数中画路径的时候，就先画弧线，再从终点连到圆心，再从圆心连到起点。为什么？因为这个顺序路径才不会断——arc是从起点开始画起的，最后路径又回到起点，才合情合理。在测试函数的时候，我想当然的先画了弧线，再从起点连圆心连终点，结果导致路径断了。大家一定要注意。
原文链接：https://www.qiquanji.com/post/7648.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知