canvas 生成饼图

最新推荐文章于 2022-07-19 22:21:41 发布

打八阿哥

最新推荐文章于 2022-07-19 22:21:41 发布

阅读量128

点赞数

分类专栏：前端文章标签： HTML5 Canvas 饼图动态绘制用户输入

本文链接：https://blog.csdn.net/qq_45457760/article/details/115386905

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

用canvas根据输入数据生成一个饼图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>blue elephant</title>
    <style>
        input{
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="can" width="400" height="400" style="background-color:cornflowerblue;float: left;">
        该浏览器不支持canvas
    </canvas>
    <div id="inpt">
        <input type="number" name="degree" id="0">
        <input type="number" name="degree" id="1">
    </div>
    <button id="but" onclick="but()">+</button>
    <button id="confirm" onclick="number()">确认</button>
    <script>
        var input = document.getElementsByName("degree")
        // 获取输入的数据
        function number(){
            // input标签个数
            num = input.length
            // 存储饼图的角度
            degree = new Array()
            // 以判断百分比的值是否合法
            sum = 0
            // 定义degree数组下标,主要是为了防止输入框中有空值的情况
            var index = 0
            for(var i = 0 ; i < num ; i++){
                var ele = document.getElementById(i)
                var val = ele.value
                if(val){
                    sum = sum + parseInt(val)
                    degree[index] = val
                }else{
                    continue
                }
                index++
            }
            if(sum>100){
                var r = confirm("请确保所有数的和小于等于100")
                if(r == true){
                    for(var i = 0;i<input.length;i++){
                        var ele = document.getElementById(i)
                        ele.value = ""
                    }
                    document.getElementById("0").focus()
                    // 返回空值，使程序停止
                    return
                }else{
                    for(var i = 0;i<input.length;i++){
                        var ele = document.getElementById(i)
                        ele.value = ""
                    }
                    document.getElementById("0").focus()
                    return
                }
            }
            degrees()
        }
        // 获取每块的大小
        function degrees(){
            // 计算角度
            for(var i = 0;i<degree.length;i++){
                degree[i] = degree[i]/100*(Math.PI*2)
            }
            // 计算弧度
            console.log(degree)
            for(var i = 1;i<degree.length;i++){
                degree[i] = degree[i]+degree[i-1]
            }
            draw()
        }
        // 画图
        function draw(){
            var canvas = document.getElementById("can");
            var can = canvas.getContext("2d")
            for(var i = 0;i<degree.length;i++){
                if(i==0){
                    can.beginPath()
                    can.moveTo(200,200)
                    can.fillStyle = "rgb("+randomInt(0,255)+","+randomInt(0,255)+","+randomInt(0,255)+")"
                    can.arc(200, 200, 150, 0, degree[i], false)
                    can.fill()
                }
                else{
                    can.beginPath()
                    can.arc(200, 200, 150, degree[i-1], degree[i], false)
                    can.fillStyle = "rgb("+randomInt(0,255)+","+randomInt(0,255)+","+randomInt(0,255)+")"
                    can.lineTo(200,200)
                    can.fill()
                }
            }
            // 当总和小于100，自动补充上缺少的饼
            if(sum<100){
                console.log("一百")
                can.beginPath()
                can.arc(200, 200, 150, degree[degree.length-1], Math.PI*2, false)
                can.fillStyle = "rgb("+randomInt(0,255)+","+randomInt(0,255)+","+randomInt(0,255)+")"
                can.lineTo(200,200)
                can.fill()
            }
        }
        // 生成随机数
        function randomInt(from, to){
            return parseInt(Math.random() * (to - from + 1) + from);
        }
        // button点击事件，增加新的输入框
        function but(){
            var input = document.getElementsByName("degree")
            var num = input.length
            var inp = document.createElement("input")
            inp.type = "number"
            inp.name = "degree"
            inp.id = num
            document.getElementById("inpt").appendChild(inp)
        }
    </script>
</body>
</html>