HTML5 Canvas 圆形进度条并显示数字百分比

雨点打透心脏的1/2处 2023-01-09 14:27 146阅读 0赞

## HTML5 Canvas 圆形进度条并显示数字百分比 ##

原文链接：`https://www.cnblogs.com/moqiutao/p/6430079.html`  
效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Canvas 圆形进度条并显示数字百分比</title>
    
        <style> * { margin: 0; padding: 0; } body { text-align: center; /* background-color: #000; */ } </style>
    
    </head>
    
    <body>
    
        <canvas id="canvas" style="background:#000;"></canvas>
        <script> window.onload = function () { var canvas = document.getElementById('canvas'), //获取canvas元素 context = canvas.getContext('2d'), //获取画图环境，指明为2d w = canvas.width = 500, h = canvas.height = 500, centerX = w / 2, //Canvas中心点x轴坐标 centerY = h / 2, //Canvas中心点y轴坐标 rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度 speed = 0.1; //加载的快慢就靠它了 /* 绘制5像素宽的运动外圈 save和restore可以保证样式属性只运用于该段canvas元素 */ function blueCircle(n) { context.save(); // 保存当前环境的状态 context.strokeStyle = "#fff"; //设置描边样式 context.lineWidth = 5; //设置线宽 context.beginPath(); //路径开始 //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针) // False = 顺时针，true = 逆时针 context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false); context.stroke(); // 绘制 context.closePath(); // 路径结束 context.restore(); // 返回之前保存过的路径状态和属性 } /* 绘制白色外圈 save和restore可以保证样式属性只运用于该段canvas元素 */ function whiteCircle() { context.save(); context.lineWidth = 5; //设置线宽 context.strokeStyle = "red"; context.beginPath(); context.arc(centerX, centerY, 100, 0, Math.PI * 2, false); context.stroke(); context.closePath(); context.restore(); } /* 百分比文字绘制 save和restore可以保证样式属性只运用于该段canvas元素 */ function text(n) { context.save(); context.strokeStyle = "#fff"; //设置描边样式 context.font = "40px Arial"; //设置字体大小和字体 //绘制字体，并且指定位置 console.log('文字', n.toFixed(0)); context.strokeText(n.toFixed(0) + "%", centerX - 25, centerY + 10); context.stroke(); //执行绘制 context.restore(); } //动画循环 (function drawFrame() { // window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画， // 并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。 // 该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行 window.requestAnimationFrame(drawFrame); context.clearRect(0, 0, canvas.width, canvas.height); whiteCircle(); // 静态的外圈 text(speed); //显示的文字 blueCircle(speed); // 运动外圈 if (speed > 100) speed = 0; speed += 0.1; }()); } </script>
    
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY2NjY0NA_size_16_color_FFFFFF_t_70]: /images/20221119/f772eb7ac14e436d87953b32fbd9e7e9.png