前端开发canvas圆环百分比进度

web前端开发工作怎么样 前端开发的工作怎么样 web前端开发工作岗位

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <title>canvas圆环进度</title>
    <link rel=”stylesheet” href=””>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .circle {
            width: 200px;
            height: 200px;
            margin: 20em auto;
            position: relative;
        }
        canvas {
            display: block;
            margin: 0;
            position: absolute;
            background: white;
            left: 0;
            top: 0;
        }
        #canvas_1 {
            z-index: 1
        }
        #canvas_2 {
            z-index: 2;
            background: transparent;
            transform: rotate(-90deg);
        }
    </style>
</head>
<body>
    <div class=”circle”>
        <canvas id=”canvas_1″ width=”200″ height=”200″></canvas>
        <canvas id=”canvas_2″ width=”200″ height=”200″></canvas>
    </div>
    <script>
        function inte(percent) {
            var canvas_1 = document.querySelector(‘#canvas_1’);
            var canvas_2 = document.querySelector(‘#canvas_2’);
            var ctx_1 = canvas_1.getContext(‘2d’);
            var ctx_2 = canvas_2.getContext(‘2d’);
            ctx_1.lineWidth = 10;
            ctx_1.strokeStyle = “#ccc”;
            //画底部的灰色圆环
            ctx_1.beginPath();
            ctx_1.arc(canvas_1.width / 2, canvas_1.height / 2, canvas_1.width / 2 – ctx_1.lineWidth / 2, 0, Math.PI * 2, false);
            ctx_1.closePath();
            ctx_1.stroke();
            if (percent < 0 || percent > 100) {
                throw new Error(‘percent must be between 0 and 100’);
                return
            }
            ctx_2.lineWidth = 10;
            ctx_2.strokeStyle = “#f90”;
            var angle = 0;
            var timer;
            (function draw() {
                timer = requestAnimationFrame(draw);
                ctx_2.clearRect(0, 0, canvas_2.width, canvas_2.height)
                //百分比圆环
                ctx_2.beginPath();
                ctx_2.arc(canvas_2.width / 2, canvas_2.height / 2, canvas_2.width / 2 – ctx_2.lineWidth / 2, 0, angle * Math.PI / 180, false);
                angle++;
                var percentAge = parseInt((angle / 360) * 100)
                if (angle > (percent / 100 * 360)) {
                    percentAge = percent
                    window.cancelAnimationFrame(timer);
                };
                ctx_2.stroke();
                ctx_2.closePath();
                ctx_2.save();
                ctx_2.beginPath();
                ctx_2.rotate(90 * Math.PI / 180)
                ctx_2.font = ’30px Arial’;
                ctx_2.fillStyle = ‘red’;
                var text = percentAge + ‘%’;
                ctx_2.fillText(text, 80, -90);
                ctx_2.closePath();
                ctx_2.restore();
            })()
        }
        window.onload = inte(60);
    </script>
</body>
</html>

前端开发师工作内容 开发oa系统前端工作流程 前端开发工作经常加班吗

» 本文来自:前端开发者 » 《前端开发canvas圆环百分比进度》
» 本文链接地址:https://www.rokub.com/5848.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!