代码:
<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现在临时抱佛脚···还请大神指教
context.arc(250, 250, 200, 0.7 * Math.PI, 0.7 * Math.PI + 1.6 * Math.PI / 100 * n);