canvas畫圓環(一)之漸變色，純色

通過canvas畫可自定義純色或漸變色的圓環，可當進度條使用，本文章做了簡單的封裝可直接使用，也可自定義更改

html結構

<div class="item-canvas">
          <canvas id="procanvas1" class="procanvas"></canvas>
</di>

需要設置外層的item-canvas的寬高，內層canvas會設置成和外層一樣。

javascript

定義函數

function process() {
        var ring = arguments[0]; //獲取傳入的第一個參數
        var canvas = document.getElementById(ring.canvasId);
        var context = canvas.getContext('2d');
        var center = [(ring.canvasW) / 2, (ring.canvasH) / 2];
        var borderWidth = ring.bdWidth;
        var r = ring.canvasW / 2 - borderWidth / 2; //因內層canvas的寬度和外層相等，所以需要減去圓環的寬度
        context.clearRect(0, 0, ring.canvasW, ring.canvasH); //清除canvas
        //開始畫一個灰色的圓
        context.save();
        context.beginPath();
        context.lineWidth = borderWidth;
        context.strokeStyle = ring.bgcolor;
        context.arc(center[0], center[1], r, 0, 2 * Math.PI, false);
        context.stroke();
        context.restore();
        //設置漸變色,做了簡單的判斷傳入的是漸變色或者純色
        if (ring.color) {
                var gradient = context.createLinearGradient(ring.x1, ring.y1, ring.x2, ring.y2);
                ring.color.forEach(element => {
                        gradient.addColorStop(element.step, element.color);
                });
                context.strokeStyle = gradient;
        }
        if (ring.strokeColor) {
                context.strokeStyle = ring.strokeColor;
        }
        /*此處是添加圓環內部的文字*/
        context.save();
        context.beginPath();
        context.font = "20px Georgia";
        context.textAlign="center"; //基於基線水平居中，垂直目前沒好的方法，有請告知
        context.fillStyle = gradient;
        context.fillText(ring.percent+"%", center[0] , center[1] ); 
        context.restore();
        //外層圓環
        context.save();
        context.beginPath();
        context.lineWidth = borderWidth;
        context.arc(center[0], center[1], r, 0, 2 * ring.percent / 100 * Math.PI, false);
        context.lineCap = "round";
        context.stroke();
        context.restore();
}

簡單封裝

//測試用漸變色
var arr = [{
        step: '0',
        color: '#43e8ff'
}, {
        step: '0.4',
        color: '#8024db'
}, {
        step: '0.6',
        color: '#a044ff'
}, {
        step: '0.9',
        color: '#5205ce'
}, {
        step: '1',
        color: '#25c1fb'
}];
var divItem = document.querySelector(".item-canvas");
var canvasW = divItem.offsetWidth; //獲取外層div寬高，然後賦值給canvas
var canvasH = divItem.offsetWidth;
process({
        canvasId: "procanvas1",  //canvas的Id
        canvasW: canvasW,        //canvas的width
        canvasH: canvasH,        //canvas的height
        bdWidth: 10,          //圓環的寬
        color: arr,              //漸變需要設置漸變的顏色及佔用的百分比需要寫小數
        bgcolor: "gray",         //圓環的背景顏色
        //strokeColor:"red",       //純色,沒漸變寫
        x1: canvasW / 2,                   //漸變的起始位置和結束位置x1,y1,x2,y2
        y1: canvasH,
        x2: canvasW / 2,
        y2: 0,
        percent: 100,             //轉過的百分比

})

效果如下圖：