Canvas圆弧角度无法通过输入框缩小（仅支持输入大于默认值的数值，不支持更小值）该如何解决？

嘿，我一眼就发现你代码里的两个关键小问题，这就是为啥输入更小数值时圆弧角度没变化的原因：

问题1：输入值的类型错误 #

你从输入框获取的value是字符串类型，但arc()方法的结束角度参数需要是数值类型。虽然JS偶尔会隐式转换，但你用模板字符串${input}把值强制转成了字符串，这很可能导致角度计算异常。

问题2：未清除Canvas旧绘制内容 #

每次点击按钮绘制新圆弧时，Canvas会在原有图形上叠加新内容。当你输入比之前小的角度，新的短圆弧会被旧的长圆弧覆盖（或者说旧的痕迹还留在画布上），视觉上就误以为角度没缩小。

修复后的完整代码 #

var button = document.querySelector(".btn");
button.addEventListener("click", () => {
  var input = document.querySelector(".inp").value;
  // 把输入值转为数值类型，兼容小数和整数
  var endAngle = parseFloat(input);
  // 可选：处理非法输入，避免非数字导致报错
  if (isNaN(endAngle)) {
    alert("请输入有效的数字！");
    return;
  }
  var c = document.querySelector(".canvas");
  var ctx = c.getContext("2d");
  // 清除整个Canvas的旧绘制内容
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.beginPath();
  // 传入数值类型的结束角度
  ctx.arc(100, 75, 50, 0, endAngle);
  ctx.stroke();
})

额外提示 #

如果需要控制圆弧的绘制方向，可以给arc()方法加第五个布尔参数：true表示逆时针绘制，默认false为顺时针，比如：

ctx.arc(100, 75, 50, 0, endAngle, true);

内容的提问来源于stack exchange，提问作者nitesh yadav