代碼：

<canvas class="canvas" width="500" height="500">不支持canvas時顯示</canvas>
<script>
    // 獲得畫布
    var canvas = document.querySelector('.canvas');
    // 創(chuàng)建容器
    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();
    // 此處最后一個參數(shù) 410*Math.PI/180為滿格
    context.arc(250, 250, 200, 0.7*Math.PI, 2 * Math.PI);
    context.strokeStyle = '#FE845F';
    context.stroke();
</script>

效果：

疑問：

如何將第二個弧線用百分比來表示，例如我將其封裝為函數(shù)，調(diào)用時傳入0-100數(shù)值進(jìn)去。平時沒寫過canvas現(xiàn)在臨時抱佛腳···還請大神指教