在前端开发中，使用HTML5的 <canvas> 元素可以绘制各种图形，包括扇形。以下是一个简单的示例，展示如何使用 <canvas> 绘制一个扇形：
<!DOCTYPE html>
<html>
<head>
<title>Canvas 扇形绘制</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 200;
var startAngle = 0; // 开始角度，以弧度为单位
var endAngle = Math.PI / 3; // 结束角度，以弧度为单位
ctx.beginPath();
ctx.moveTo(centerX, centerY); // 将路径的起始点移动到圆心的位置
ctx.arc(centerX, centerY, radius, startAngle, endAngle, false); // 绘制圆弧
ctx.closePath(); // 连接起始点和终点，形成封闭的扇形
// 设置填充颜色和填充扇形
ctx.fillStyle = 'blue';
ctx.fill();
// 绘制扇形的两条边
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX + radius * Math.cos(startAngle), centerY + radius * Math.sin(startAngle));
ctx.strokeStyle = 'black';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX + radius * Math.cos(endAngle), centerY + radius * Math.sin(endAngle));
ctx.strokeStyle = 'black';
ctx.stroke();
</script>
</body>
</html>
在这个示例中，我们首先获取了 <canvas> 元素的引用，并创建了一个2D渲染上下文。然后，我们定义了扇形的中心点、半径、起始角度和结束角度。接下来，我们使用 beginPath() 方法开始一个新的路径，并使用 moveTo() 和 arc() 方法绘制扇形。最后，我们设置填充颜色并填充扇形，再绘制扇形的两条边。
请注意，这个示例中的角度是以弧度为单位的。在JavaScript中，Math.PI 表示π（圆周率），因此 Math.PI / 3 表示60度的角度（因为π弧度等于180度）。你可以根据需要调整起始角度和结束角度以绘制不同大小的扇形。