代码:<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个赞
慕婉清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]
添加回答
举报
0/150
提交
取消
