H5的canvas实现环形进度条

最新推荐文章于 2022-07-29 10:07:08 发布

请叫我大豆包

最新推荐文章于 2022-07-29 10:07:08 发布

阅读量731

点赞数 4

分类专栏：环形进度条文章标签： H5环形进度条 js环形进度条 canvas环形进度条

本文链接：https://blog.csdn.net/apologizeerror/article/details/85112518

版权

环形进度条专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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)

请叫我大豆包

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5的canvas实现环形进度条

H5的canvas实现环形进度条html部分 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width"&gt;
复制链接

扫一扫