zoukankan      html  css  js  c++  java
  • CARVARS 圆形进度条

    先看下效果

    这是两个不同进度的进度条,由于carvas用找的只是id所以下面想多个进度条必须要根据class来找到id,所以我封装了一个进度条的函数,下面的代码直接复制粘贴就可以了

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>

    <canvas class="can" jd="60" id="myCanvas" width="120px" height="120px" style="border: 1px solid red;"></canvas>
    <canvas class="can" jd="10" id="myCanvas1" width="120px" height="120px" style="border: 1px solid red;"></canvas>
    <script type="text/javascript">

    var can =document.getElementsByClassName("can");
    for(var i= 0;i<can.length;i++){
    var arry =can[i].getAttribute("id");
    var jd=can[i].getAttribute("jd");
    canvars(arry,jd)
    }
    function canvars(el,jd){ //封装画圆函数
    var circle = {x : 60, y :60, r : 50 };
    var start =-Math.PI / 2 ;
    var j=0;
    var time;

    var cvsElement = document.getElementById(el);

    var ctx=cvsElement.getContext("2d");

    time =setInterval(function(){

    ctx.clearRect(0,0,400,300);
    ctx.beginPath();
    ctx.strokeStyle = "#f1f1f1";
    ctx.lineWidth=10;

    ctx.arc(circle.x, circle.y, circle.r, start,Math.PI*2, false);
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle = "blue";
    ctx.lineWidth=10;
    ctx.arc(circle.x, circle.y, circle.r, start,start+Math.PI/180*j, false);
    ctx.stroke();
    if(j>=jd*360/100){
    clearInterval(time);
    timer=null;
    }
    j++;
    },1)

    }


    </script>
    </body>
    </html>

  • 相关阅读:
    当今的架构师和架构
    外企2
    测试驱动开发TDD系列
    在IIS中部署WCF中遇到的问题
    设计高可用和高负载的网站系统(转载)
    IIS中部署WCF
    无限级分类1
    读《WCF技术剖析》(卷一)
    无限极列表2
    TCP/IP、HTTP、WEBSERVICE、SOAP、ICE都使用后才有感慨
  • 原文地址:https://www.cnblogs.com/a8497336/p/8206151.html
Copyright © 2011-2022 走看看