canvas圆形百分比

来源：互联网发布：游戏编程只会算法编辑：程序博客网时间：2024/05/16 23:40
<!DOCTYPE html><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: 108px;height: 108px;position: relative;border:1px solid red}     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="108" height="108"></canvas>        <canvas id="canvas_2" width="108" height="108"></canvas>    </div>    <span>文字</span>    <script>    function inte(percent,id1,id2) {        var canvas_1 = document.querySelector('#canvas_1');//不是document.getElementById        var canvas_2 = document.querySelector('#canvas_2');        var ctx_1 = canvas_1.getContext('2d');//当前唯一的合法值是 "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, 30, -45);//中间文字所在位置            ctx_2.closePath();            ctx_2.restore();        })()    }        window.onload = inte(60);    </script></body></html>
阅读全文
0 0