半圆形进度条(html)

原创

已于 2023-07-17 13:08:12 修改 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html

于 2020-05-05 10:53:13 首次发布

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>半环形进度条</title>
</head>
<style>
  
</style>

<body>
  <canvas id="canvas" width="150" height="150">
    <p>抱歉，您的浏览器不支持canvas</p>
  </canvas>
  <script>
    toCanvas('canvas','red',30);
    
    /**
     *  生成环形进度条
     */
    function toCanvas(id, color, progress) {
   
   
        //canvas进度条
        var canvas = document.getElementById(id),
            ctx = canvas.getContext("2d"),
            percent = progress, //最终百分比
            circleX = canvas.width / 2, //中心x坐标
            circleY = canvas.height / 2, //中心y坐标
            radius = 60, //圆环半径
            cradius = 75, // canvas半径
            lineWidth = 6, //圆形线条的宽度
            fontSize = 20;