企业官网建设流程全解析

上一篇做了四分区的圆形方向按钮，这篇在它基础上升级，外环是四个方向扇形，中央多一个圆形确认按钮，形成方向选择 + 确认的组合控件。

游戏手柄的 D-Pad + 确认键、车载导航的方向选择 + OK 键、智能电视遥控器，都是这种布局。

最终效果

280x280 的控件，外环四个方向扇形，中央一个深灰色 OK 确认按钮。5 个区域都能独立悬停、按压和点击。

拆开讲讲

跟上一篇的核心区别有两个，扇形从实心改成环形，中央加了一个独立按钮。其他（命中检测、MouseArea 交互、方向箭头）思路一样。

画环形扇形

普通扇形是moveTo(cx,cy)→arc(outerR)→closePath()。环形扇形要画两条弧。

for (var i = 0; i < 4; i++) { ctx.beginPath() ctx.arc(cx, cy, rOut, starts[i], ends[i], false) // 外弧，顺时针 ctx.arc(cx, cy, rIn, ends[i], starts[i], t