为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

天涯尽头无女友 2019-02-13 17:13:52
代码:<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 回答

?
aluckdog

TA贡献1847条经验 获得超7个赞

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


查看完整回答
反对 回复 2019-02-27
?
慕婉清6462132

TA贡献1804条经验 获得超2个赞

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

n范围[0,100]


查看完整回答
反对 回复 2019-02-27
  • 2 回答
  • 0 关注
  • 730 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号