js使用Canvas对象绘制圆环 

<!DOCTYPE html>
<html>
<head>
    <title> </title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
    <!-- <fieldset></fieldset> -->
    <canvas id="myCanvas" width="400px" height="400px" >Your browser does not support the HTML5 canvas tag.</canvas>

<script type="text/javascript">
/**
 *    ctx: Canvas对象    
 *    data: 用于绘制圆环的数据来源
 *    option: 配置圆环半径和圆心位置    
 */
    function yuanhuan(ctx, data, option) {
        var cood = option.cood;
        var radius = option.radius;
        var lastpos = pos = 0;
        // 计算总的value值
        var sum = 0;
        for(var i = 0; i < data.length; i++){
            sum += data[i].value;
        };
        for (var i = 0; i < data.length; i++) {
            // 开始一个新的绘制路径
            ctx.beginPath();
            // 移动到指定位置开始新的路径
            ctx.moveTo(cood.x, cood.y);
            // 指定填充颜色
            ctx.fillStyle = data[i].bgcolor;

            pos = lastpos + Math.PI * 2 * data[i].value / sum;
            ctx.arc(cood.x, cood.y, radius, lastpos, pos, false);
            ctx.fill();
            lastpos = pos;
        }
        // 开始一个新的绘制路径，画中间白色区域
        ctx.beginPath();    
        ctx.fillStyle = "white";
        radius *= 0.5;
        ctx.arc(cood.x, cood.y, radius, 0, Math.PI * 2, false);
        ctx.fill();
    };
    var data = [{
            bgcolor: '#D53A35',
            value: 335
        }, {
            bgcolor: '#2F4554',
            value: 310
        }, {
            bgcolor: '#61A0A8',
            value: 234
        }, {
            bgcolor: '#D48265',
            value: 135
        }, {
            bgcolor: '#91C7AE',
            value: 1548
        }];
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    yuanhuan(ctx, data, {
        cood: {
            x: 200,        // 圆环中心x、y坐标
            y: 200
        },
        radius: 150        // 圆环半径
    })
</script>
</body>
</html>

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<style type="text/css">
    canvas {
        border: 1px solid #1F232A;
    }
    
    .div {
        width: 400px;
        height: 50px;
    }
    
    input,
    button {
        text-align: center;
        font-size: 20px;
    }
</style>

<body>
    <canvas id="main" width="450" height="300"></canvas>
    <div class="div">
        进度：<input id="num" type="number" value="100" max="100" />
        <button id="makeSure">确定</button>
    </div>
</body>
<script type="text/javascript">
    var makeSure = document.getElementById("makeSure");
    makeSure.onclick = function() {
        var ctx = document.getElementById("main").getContext("2d");
        ctx.clearRect(0, 0, 450, 300);
        var num = parseInt(document.getElementById("num").value) + 1;
        if (num <= 101) {
            for (var x = 0; x < num; x++) {
                (function(x) {
                    setTimeout(function() {
                        ctx.beginPath()
                        ctx.lineWidth = 10;
                        ctx.strokeStyle = 'orange';
                        ctx.arc(200, 200, 50, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
                        ctx.stroke();
                        ctx.clearRect(390, 25, 50, 50);
                        ctx.clearRect(175, 175, 55, 55)
                        ctx.fillStyle = 'orange';
                        ctx.fillRect(10 + x * 3.5, 30, 3.5, 40);
                        ctx.font = "20px Arial";
                        ctx.fillText(x + "%", 390, 58)
                        ctx.fillText(x + "%", 175, 208)
                    }, x * 30);
                })(x);
            }
        } else {
            alert("请输入0-100之间的数字")
        }
    }
    makeSure.click();
</script>

</html>

 

posted on 2018-04-18 18:41  jasonduanmu  阅读(537)  评论(0)  编辑  收藏  举报

导航