html5 canvas 原生 javascript 实现话逆向饼状图圈图加文字-CFANZ编程社区

图片：

html5 canvas 原生 javascript 实现话逆向饼状图圈图加文字_顺时针

话扇形：

//画扇形百分比逆时针
cts.beginPath();
cts.moveTo(x, y);
cts.arc(x, y, radius, Math.PI * 1.5, Math.PI * 1.5 - Math.PI * 2 * process / maxValue, true);
cts.closePath();
cts.fillStyle = "#32CD32";
cts.fill();

角度

html5 canvas 原生 javascript 实现话逆向饼状图圈图加文字_顺时针_02

中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始角：arc(100,75,50,0,1.5*Math.PI)
结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test1</title>
</head>
<style>
    body {
        background: #000;
        margin: 0px;
        padding: 0px;
    }

    #main {
        position: absolute;
        width: 200px;
        height: 200px;
    }
</style>

<body>
    <div id="main"></div>

</body>

<script>
    var por = {
        init: function () {
            var main = document.getElementById("main");
            main.innerHTML = '<canvas id="canvasmain"  width="'+main.offsetWidth+'" height="'+main.offsetHeight+'"></canvas>';
            var vmain = document.getElementById("canvasmain");
            DrowProcess(vmain, 100, 100, 80, 100, 80, '#ddd', '#32CD32', '#32CD32', '那日的:', 'M');
        }
    };
    por.init();
   /**
    *添加饼状图逆向
    *canvas canvas 对象 x left y top radius 半径 *maxValue 最大值分母 process 分子
    */
    function DrowProcess(canvas, x, y, radius, maxValue, process) {
        if (canvas.getContext) {
            var cts = canvas.getContext('2d');
        } else {
            return;
        }
        cts.beginPath();
        cts.moveTo(x, y);// 坐标移动到圆心  
        // 画圆,圆心是24,24,半径24,从角度0开始,画到2PI结束,最后一个参数是方向顺时针还是逆时针  
        cts.arc(x, y, radius, 0, Math.PI * 2, false);
        cts.closePath();
        cts.fillStyle = "#ddd";
        cts.fill();

        //画扇形百分比 逆时针
        cts.beginPath();
        cts.moveTo(x, y);// 画扇形的时候这步很重要,画笔不在圆心画出来的不是扇形  
        // 跟上面的圆唯一的区别在这里,不画满圆,画个扇形  
        cts.arc(x, y, radius, Math.PI * 1.5, Math.PI * 1.5 - Math.PI * 2 * process / maxValue, true);
        cts.closePath();
        cts.fillStyle = "#32CD32";
        cts.fill();

        //填充中间一个园
        cts.beginPath();
        cts.moveTo(x, y);
        cts.arc(x, y, radius - (radius * 0.26), 0, Math.PI * 2, true);
        cts.closePath();
        cts.fillStyle = '#000';
        cts.fill();

        //在中间写字 
        cts.font = "bold 9pt Arial";
        cts.fillStyle = "#fff";
        cts.textAlign = 'center';
        cts.textBaseline = 'middle';
        cts.moveTo(x, y);
        cts.fillText("全国企业：9999 W", x, y);

    }

 

</script>

</html>

html5 canvas 原生 javascript 实现 话 逆向饼状图 圈图 加文字

html5 canvas 原生 javascript 实现话逆向饼状图圈图加文字