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.width = ring.canvasW;
        canvas.height = ring.canvasH;
        //開始畫一個灰色的圓
        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();
        //圓環中文字
        context.save();
        context.beginPath();
        context.font = "20px Georgia";
        context.textAlign="center";
        context.fillStyle ="#fff";
        context.fillText(ring.percent+"%", center[0], center[1]+10);
        context.restore();
        var color = [
             	"#FFFF00",
                "#FFCC00",
                "#FFCC33",
                "#FF9900",
                "#FF6600",
                "#FF3300",
                "#FF0000",
                "#CCFF00",
                "#00FF33",
                "#00FF00"
        ];
        if (ring.percent !== 100) {
        //將圓劃分成了10格
                let a = Math.floor(ring.percent / 10);
                for (let i = 0; i < a; i++) {
                        context.save();
                        context.beginPath();
                        context.lineWidth = borderWidth;
                        context.strokeStyle = color[i];
                        //此處加的0.3是每格之間的間隔
                        context.arc(center[0],center[1], r,((2 * (i * 10 + 0.3)) / 100) * Math.PI,((2 * (i + 1) * 10) / 100) * Math.PI, false);
                        context.stroke();
                        context.restore();
                }
                //此處爲每格多出來的部分
                if (ring.percent % 10 !== 0) {
                        let ra = ring.percent - a * 10;
                        context.save();
                        context.beginPath();
                        context.lineWidth = borderWidth;
                        context.strokeStyle = color[a - 1];
                        //context.strokeStyle = gradient;
                        context.arc(center[0],center[1],r,  ((2 * (a  * 10 + 0.3)) / 100) * Math.PI,((2 * (a  * 10 + ra)) / 100) * Math.PI,,false );
                }
        } 
}

簡單封裝

顏色可以從函數拿出來在外面定義每格的顏色。

var divItem = document.querySelector(".item-canvas");
var canvasW = divItem.offsetWidth;
var canvasH = divItem.offsetWidth;
process({
        canvasId: "procanvas1",  //canvas的Id
        canvasW: canvasW,        //canvas的width
        canvasH: canvasH,        //canvas的height
        bdWidth: 10,          //圓環的寬
        bgcolor: "gray",         //圓環的背景顏色
        x1: canvasW / 2,                   //漸變的起始位置和結束位置x1,y1,x2,y2
        y1: canvasH,
        x2: canvasW / 2,
        y2: 0,
        percent: 66,             //轉過的百分比
})

效果圖如下：