H5的canvas实现环形进度条_环保进度条h5-优快云博客

本文链接：https://blog.youkuaiyun.com/ApologizeError/article/details/85112518

本文介绍了一种使用HTML5的Canvas元素创建环形进度条的方法，通过JavaScript动态生成进度条，展示了如何设置样式和动画效果，适用于网页设计和交互应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

H5的canvas实现环形进度条

html部分

 <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
      <div class="content">
        <div class="mainball"><span class="pertext">70%</span>
          <ul class="itemwrap">
          </ul>
        </div>
      </div>
    </body>
    </html>

js部分

 body {
      background: #236836;
    }
    .content{
      margin-top: 100px;
    }
    .mainball {
      margin: 70px auto;
      background: #0AF135;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      line-height: 300px;
      text-align: center;
      position: relative;
      font-size: 80px;
      color: #fff;
    }
    
    .itemwrap {
      padding: 0;
      margin: 0;
      list-style: none;
      position: absolute;
      top: -150px;
      left: -150px;
      border: 300px solid rgba(190, 20, 20, 0);
      border-radius: 50%;
      transform: rotate(240deg);
    }
    
    
    .itemwrap li {
      position: absolute;
      top: -180px;
      left: -4px;
      transform-origin: 4px 180px;
      transition: all .3s .5s;
    }
    
    .item {
      width: 8px;
      height: 20px;
      background: #4e6a4f;
    }

js部分

function render(pers){
  var fragment = document.createDocumentFragment();

  var itemnum = 72
  var deg = 360 / itemnum

  var r=58
  var g=255
  var b=2

  var per = pers /100

  var text = document.querySelector('.pertext')
  text.innerText=per*100 + '%'

  for(var i=0;i<itemnum;i++){
    var item = document.createElement('div')
    item.className = "item"
    if(i <= itemnum * per * 2/3 ){
      var bgcolor = 'rgb('+ (r+4*i)+','+(g-5*i)+','+b+')'
      item.style.background = bgcolor
    }
  
    var li = document.createElement('li')
    var curdeg = deg * i
    if(curdeg<=240){
      li.style.transform=`rotate(${curdeg}deg)`
      li.appendChild(item)
      fragment.appendChild(li)
    }
  
}


var itemwrap = document.querySelector('.itemwrap')

itemwrap.appendChild(fragment)
}

render(50)