html5 canvas圆形带数字加载进度条动画-百分比进度条加载

相关文章推荐

逆袭的板栗 · SVG转图片遇到的坑 - 饭饭大人 - 博客园· 1 周前 ·

卖萌的芹菜 · react-html2canvas-jspd ...· 4 小时前 ·

光明磊落的蚂蚁 · 使用jsPDF+html2canvas导出P ...· 4 小时前 ·

纯真的保温杯 · AIGC算法研究团队整理汇总[持续更新]-C ...· 5 月前 ·

慷慨大方的烤地瓜 · Invalid template ...· 5 月前 ·

谈吐大方的盒饭 · SQLSERVER ...· 6 月前 ·

腼腆的围巾 · r - Raster to points ...· 10 月前 ·

率性的大熊猫 · VBA二维数组追加数据_vba数组添加数据_ ...· 11 月前 ·

<style>
html{ width:100%; height: 100%;}
body{ width:100%; height: 100%;  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif}
*{ margin: 0; padding: 0;}
.splash{ position: absolute; z-index: 999; display: table; width: 100%; height: 100%; background: #f3f0eb;}
.splash>.splash-inner{ display: table-cell; text-align: center; vertical-align: middle;}
.splash .loading-circle{ position: relative; width: 204px; height: 204px; margin: auto;}
.splash .loading-circle>*{ display: block; position: absolute; box-sizing:border-box; border-radius:102px;}
.splash .loading-circle>p{ z-index: 3; width: 100%; height: 100%; text-align: center; line-height: 204px; font-size: 56px; font-weight: lighter; color: #999;}
.splash .loading-circle>canvas.mask{z-index: 2;/*-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);transform:rotate(-90deg);*/}
.splash .loading-circle>canvas.bg {z-index: 1; width: 100%; height: 100%; border: 8px solid #ddd ;}
</style>
<div class="splash" id="splash">
     <div class="splash-inner">
          <div class="loading-circle" id="loadingCircle">
               <p><span id="loadedNum">0</span>%</p>
               <canvas class="mask" id="loadingProgress" width="204" height="204"></canvas>
               <canvas class="bg" width="204" height="204"></canvas>
          </div>
     </div>
</div>

JS代码为：

var slots={},c=document.getElementById('loadingProgress'),ctx=c.getContext('2d');
window.hasLoaded=0;
window.loading=false;
window.ulp=ulp;
function ulp(percent){
    window.loading=true;
    var i=0,draw=null;
    draw=setInterval(function(){
        if(window.hasLoaded > 100){
            window.loading=false;
            clearInterval(draw);
            draw=null;
            return true;
        if(i < percent){
            i++;
            window.hasLoaded+=1;
        }else{
            clearInterval(draw);
            draw=null;
    },10);
function d(){
    var lp=document.getElementById('loadedNum');
    lp.innerHTML =window.hasLoaded;
    var loaded=window.hasLoaded *2 /100 *Math.PI,cw=204,hcw=102;
    ctx.clearRect(0,0,cw,cw);
    ctx.beginPath();
    ctx.arc(hcw,hcw,hcw-4,0,loaded,false);
    ctx.lineWidth=10;
    ctx.strokeStyle="#ff6000";
    ctx.stroke();
ulp(67);

本地文章效果为：app/html5canvas/bar_canvas/demo.html

文章来自： http://www.17sucai.com/pins/13576.html

第二种方式：

HTML代码为：

<style>
html{ width:100%; height: 100%;}
body{ width:100%; height: 100%;  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif}
*,::before,::after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent; margin: 0; padding: 0;}
.splash canvas{ position: absolute;}
.splash{ width: 204px; height: 204px; margin: 100px auto; position: relative;}
.splash canvas.bg {z-index: 1; width: 100%; height: 100%; border: 40px solid #f8cf73 ; border-radius: 100%;}
#myCanvas01{left: 0px;top: 0px;z-index: 30;}
#loadingProgress{ border-radius: 100%;width: 100%; z-index: 2;-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg);}
#myCanvas02{ left: 0; top: 0; z-index: 30;}
</style>
<div class="splash" id="splash">
     <canvas id="loadingProgress" width="204" height="204">抱歉！浏览器不支持。</canvas>
    <canvas id="myCanvas01" width="204" height="204">抱歉！浏览器不支持。</canvas>
    <canvas id="myCanvas02" width="204" height="204">抱歉！浏览器不支持。</canvas>
    <canvas class="bg" width="204" height="204">抱歉！浏览器不支持。</canvas>
</div>

JS代码为：

<script>
zhuValue=13+1;
keValue=10+1;
var data=Math.round(keValue / (zhuValue + keValue)*100);
//alert(data);
var slots={},c=document.getElementById('loadingProgress'),ctx=c.getContext('2d');
var c1=document.getElementById('myCanvas01'),ctx1=c1.getContext('2d');
var c2=document.getElementById('myCanvas02'),ctx2=c2.getContext('2d');
window.hasLoaded=0;
window.loading=false;
window.ulp=ulp;
function ulp(percent){
    window.loading=true;
    var i=0,draw=null;
    draw=setInterval(function(){
        if(window.hasLoaded > 100){
            window.loading=false;
            clearInterval(draw);
            draw=null;
            return true;
        if(i < percent){
            initPoint();
            i++;
            window.hasLoaded+=1;
        }else{
            clearInterval(draw);
            draw=null;
    },10);
function d(){
    //var lp=document.getElementById('loadedNum');
    //lp.innerHTML =window.hasLoaded;
    var loaded=window.hasLoaded *2 /100 *Math.PI,cw=204,hcw=102;
    ctx.clearRect(0,0,cw,cw);
    ctx.beginPath();
    ctx.arc(hcw,hcw,hcw-20,0,loaded,false);
    ctx.lineWidth=41;
    ctx.strokeStyle="#9ab5ec";
    ctx.stroke();
function initPoint(){
    ctx1.beginPath();
    ctx1.moveTo(154,14);
    ctx1.lineTo(160,5);
    ctx1.lineTo(180,5);
    ctx1.strokeStyle='#f8cf73';
    ctx1.fillText('主胜',180,10,80);
    ctx1.fillStyle='#f8cf73';
    ctx1.stroke();
    //下边横线
    ctx2.beginPath();
    ctx2.moveTo(154,191);
    ctx2.lineTo(160,200);
    ctx2.lineTo(180,200);
    ctx2.strokeStyle='#9ab5ec';
    ctx2.fillText('客胜',180,200,80);
    ctx2.fillStyle='#9ab5ec';
    ctx2.stroke();
ulp(data);
</script>

本地效果为：app/html5canvas/bar_canvas/demo2.html

第三种方式：

HTML代码为：

 1 <canvas id="pie1" width="200px" height="200px"></canvas>
 2   <canvas id="pie2"></canvas>
 4     <script src="js/canvas.js"></script>
 5     <script type="text/javascript">
 6         new Chart("pie1").ratePie(98);
 8         var pie=new Chart("pie2");
 9             pie.ratePie(50);
10     </script>

JS代码为：

 1 window.Chart=function(domId){
 2     var canvas = document.getElementById(domId);
 3     var ctx = canvas.getContext("2d");
 4     var W = canvas.width;
 5     var H = canvas.height;
 6     var deg=0,new_deg=0,dif=0;
 7     var text,text_w;
 8     var R=W<H?W:H;//先默认环半径为canvas宽度
 9     var bgR=(R-R/3)/2; //内环背景半径
10     var linkW=R/2 - bgR;//环宽度=(W/2 - 内半径)
11     var inW=linkW/3;//内环宽度=环宽度*1/3
12     var outW=linkW*2/3;//外环宽度=环宽度*2/3
13     var inR=bgR+inW/2;//内环半径=内半径+内环宽度/2
14     var outR=bgR+inW+outW/2;//外环半径=内半径+内环宽度+外环宽度/2
15     var $this=this;
16     $this.ratePieNoAnimation=function(number){
17         deg=360*number/100;
18         //底色大
19         ctx.clearRect(0,0,W,H);
20         ctx.beginPath();
21         var grd = ctx.createLinearGradient(0,H, W, 0);//颜色渐变的起始坐标和终点坐标
22             grd.addColorStop(0, "#74DE1C");
23             grd.addColorStop(0.3,"#9DDE12");
24             grd.addColorStop(0.6,"#B2ED2E");
25             grd.addColorStop(1,"#CBF76C");
26             ctx.strokeStyle = grd;//生成的颜色块赋值给样式
27             ctx.lineWidth=outW;
28             ctx.arc(W/2,H/2,outR,0,Math.PI*2,false);
29             ctx.stroke();
30         //底色小
31         ctx.beginPath();
32         var grd=ctx.createLinearGradient(W,0,0,H);
33             grd.addColorStop(0,"#74DE1C");
34             grd.addColorStop(0.3,"#9DDE12");
35             grd.addColorStop(0.6,"#B2ED2E");
36             grd.addColorStop(1,"#CBF76C");
37             ctx.strokeStyle=grd;
38         ctx.lineWidth=inW;
39         ctx.arc(W/2,H/2,inR,0,Math.PI*2,false);
40         ctx.stroke();
42         //圆心背景
43         ctx.beginPath();
44         ctx.fillStyle="#D9E5E5";
45         ctx.arc(W/2,H/2,bgR,0,Math.PI*2,false);
46         ctx.fill();
48         //外层
49         var r=deg*Math.PI/180;
50         ctx.beginPath();
51         var grd=ctx.createLinearGradient(0,H,W,0);
52             grd.addColorStop(0,"#8BEAF5");
53             grd.addColorStop(0.3,"#22A4D4");
54             grd.addColorStop(0.6,"#0B72BD");
55             grd.addColorStop(1,"#0A5DA0");
56             ctx.strokeStyle=grd;
57         ctx.lineWidth=outW;
58         ctx.arc(W/2,H/2,outR,0-90*Math.PI/180,r-90*Math.PI/180,false);
59         ctx.stroke();
60         //内层
61         ctx.beginPath();
62         var grd = ctx.createLinearGradient(W, 0, 0,H);
63             grd.addColorStop(0, "#8BEAF5");
64             grd.addColorStop(0.3, "#22A4D4");
65             grd.addColorStop(0.6, "#0B72BD");
66             grd.addColorStop(1, "#0A5DA0");
67             ctx.strokeStyle = grd;
68         ctx.lineWidth=inW;
69         ctx.arc(W/2,H/2,inR,0-90*Math.PI/180,r-90*Math.PI/180,false);
70         ctx.stroke();
72         ctx.fillStyle="#000";
73         ctx.font="bold "+R/4+"px Arial";
74         text=Math.floor(deg/360*100)+"%";
75         text_w =ctx.measureText(text).width;
76         ctx.fillText(text,W/2 - text_w/2,H/2+R/10);
78     };
79     $this.ratePie=function(number){
80         var i=0;
81         var t= setInterval(function(){
82             if(i == number){
83                 clearInterval(t);
84             }else{
85                 number > 0 ? i++: i--;
86             }
87             $this.ratePieNoAnimation(i);
88             if(i >100 || i < -100){//如果数字太大，取消动画效果
89                 $this.ratePieNoAnimation(number);
90                 clearInterval(t);
91             }
92         },2000/(number >0 ? number : -number));
93     }
本地效果为：app/html5canvas/progress/demo.html
线上效果为：http://www.jq22.com/jquery-info8143
第四种方式：
 文章来自：http://www.17sucai.com/pins/11074.html