Canvas 弧度转为百分比问题、求指教

代码:

<canvas class="canvas" width="500" height="500">不支持canvas时显示</canvas>
<script>
    // 获得画布
    var canvas = document.querySelector('.canvas');
    // 创建容器
    var context= canvas.getContext('2d');
    // 绘制圆形
    context.beginPath();
    context.arc(250, 250, 200, 0.7*Math.PI, 2.3 * Math.PI);
    context.lineWidth = 20;
    context.lineCap = 'round';
    context.strokeStyle = '#E54E1F';
    context.stroke();

    context.beginPath();
    // 此处最后一个参数 410*Math.PI/180为满格
    context.arc(250, 250, 200, 0.7*Math.PI, 2 * Math.PI);
    context.strokeStyle = '#FE845F';
    context.stroke();
</script>

效果:
图片描述

疑问:

如何将第二个弧线用百分比来表示,例如我将其封装为函数,调用时传入0-100数值进去。平时没写过canvas现在临时抱佛脚···还请大神指教
阅读 2.4k
2 个回答

context.arc(250, 250, 200, 0.7 * Math.PI, 0.7 * Math.PI + 1.6 * Math.PI / 100 * n);

context.arc(250, 250, 200, 0.7*Math.PI, 0.7*Math.PI+1.6/100*n*Math.PI);

n范围[0,100]

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题