鸿蒙学习笔记：用 ArkTS Canvas 手绘环形进度条的一次尝试

最近在练习一个签到打卡类的小页面，想在首页放一个“本周打卡进度”环。系统自带的 Progress 组件是线形和实心环形两种固定样式，颜色和粗细调起来不太顺手，干脆试了试用 Canvas 自己画一个环形进度条，顺手记下这次尝试。

做法不复杂。页面里放一个宽高 200 的 Canvas 组件，在 onReady 回调里拿到 CanvasRenderingContext2D。先以圆心画一圈浅灰色的底环，线宽 12、端点用圆角；再按进度画一段主色弧线。角度要从顶部开始算，起始角写成 -Math.PI / 2，进度 p 对应的弧长就是 p * 360 度。最后在圆心处叠一个 Text 显示百分比，进度值放在 @State 里，改值后调用 invalidate() 触发重绘。

过程中踩了几个小坑。第一，画布默认以左上角为原点，圆心要用宽高的一半来算，写死坐标换个尺寸就偏了。第二，arc 的角度是从 x 轴正方向开始算的，想从十二点方向起笔，起始角必须减掉 90 度。第三，每次重绘前要先 clearRect 清掉上一帧，不然旧弧线会越叠越粗。第四，线宽如果超过半径，圆角会被画布边缘裁掉，半径要留出线宽一半以上的边距。

改完之后效果比想象中顺手，换颜色、换粗细只要改两行参数，比套现成组件自由得多。代价是动画和触摸都得自己写，进度变化目前是直接跳变的。下一步想试试把环做成可以拖动的，根据触点的角度反推进度，再补一个平滑过渡，也算是把 Canvas 的基本功再练一遍。