CSS canvas绘制圆弧/圆形效果不符合预期问题求助

你的绘制效果不符合预期，通常由以下几类错误导致：

• 画布尺寸设置错误：不要通过CSS定义canvas的宽高，CSS设置仅控制画布的显示拉伸比例，实际绘制区域的尺寸需要通过<canvas>标签自带的width和height属性设置，否则会出现图形拉伸、偏移、变形问题。
• arc()方法参数使用错误：该方法的参数顺序为(圆心x坐标, 圆心y坐标, 半径, 起始弧度, 结束弧度, [是否逆时针绘制])，需要注意起始和结束位置的单位是弧度而非角度，角度转弧度的公式为角度值 * Math.PI / 180，直接传入角度值会导致圆弧长度完全不符合预期。
• 未清理旧路径：每次绘制新的圆弧前需要调用beginPath()方法开启新路径，否则之前缓存的路径会和当前圆弧一起渲染，出现多余线条、颜色异常等问题。
• 未执行实际绘制指令：仅调用arc()只是定义了绘制路径，需要额外调用stroke()绘制描边，或者调用fill()填充区域，路径才会实际渲染到画布上。
• 绘制位置超出可视区域：arc()的x、y参数为圆心坐标，如果数值超出画布宽高范围，圆弧会被绘制到可视区域外，无法看到渲染结果。

内容的提问来源于stack exchange，提问作者Vineesh TP