介绍
这篇文章给大家分享的是有关的HTML中帆布如何实现圆圈进度条的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
实现仅有帆布圆圈进度条的实例代码,本人的想法有很多,但是利用帆布无疑是最方便的解决办法,在此以帆布实现为例子,具体实现步骤如下:
Paste_Image。png
& lt; ! DOCTYPE html>
& lt; html>
& lt; meta charset=皍tf-8"祝辞
& lt; head>
,,,& lt; title> & lt;/title>
,,,& lt; style 类型=拔谋?css"比;
,,,,,,,* {
,,,,,,,,,,,保证金:,0;
,,,,,,,,,,,填充:,0;
,,,,,,,}
,,,& lt;/style>
,,,& lt; !——, & lt; script 类型=拔谋?javascript" https://www.yisu.com/zixun/, src=" js/Progress.js "> - ->
<帆布id=" canvas1 ">
<帆布id=" canvas2 ">
<帆布id=" canvas3 ">
<帆布id=" canvas8 ">
<帆布id=" canvas9 ">
<帆布id=" canvas10 ">
<脚本type=" text/javascript”>
窗口。onload=function () {
新进展().renderOne (6“canvas1”, 100年,10);//id、画布宽和高,圆的半径百分百。
新进展().renderOne (5“canvas2”, 100年,20);
新进展().renderOne (5“canvas3”, 100年,30);
新进展().renderOne (5“canvas8”, 100年,80年);
新进展().renderOne (5“canvas9”, 100年,90年);
新进展().renderOne (“canvas10”、100、5100);
}
函数进展(){
var进步={textheight: null, renderOne:函数(id、长度、r %) {
画布var=. getelementbyid (id);
var=canvas.getContext上下文(2 d);
画布。宽度=长度;
画布。身高=长度;
var=0;
var间隔=setInterval(函数(){我+ +;
的进步。呈现(上下文、长度、r,百分比);
如果(我>=%){clearInterval(间隔)}},10)},呈现:函数(上下文,长度,r,百分比){上下文。clearRect(0, 0,长度,长度);
context.beginPath ();
var梯度=上下文。createLinearGradient(长度,0,0,0);
梯度。addColorStop (“0”、“# 76 eec6”);
gradient.addColorStop (“1.0”,“# 63 b8ff”);
上下文。strokeStyle=梯度;
上下文。线宽=r;
上下文。弧(长度/2、长度/2,长度/2 - r, -0.5 *数学。π,-0.5 *数学。PI + i * 0.02 *数学。π,假);
context.stroke ();
context.closePath ();
context.beginPath ();
上下文。strokeStyle=" # 8 d8d8d”;
上下文。strokeStyle='红',/////////////////////////////////////////////////上下文。线宽=2;
上下文。fillStyle=" # ffffff”;
上下文。弧(长度/2,r, 0.6 * r, 0, 2 *数学。π,假);
context.stroke ();
context.fill ();
context.closePath ();
context.beginPath ();
var弧度=%/100 * 2 *数学。π- 0.5 * Math.PI;
var x=Math.cos(弧度)*长度(长度/2 - r) +/2;
var y=sin(弧度)*长度(长度/2 - r) +/2;
上下文。弧(x, y, 0.6 * r, 0, 2 *数学。π,假);
context.stroke ();
context.fill ();
context.closePath ();
context.beginPath ();
上下文。线宽=1;
上下文。strokeStyle=" # 54 ddaf”;
上下文。fillStyle=" # 54 ddaf”;
上下文。fillStyle="蓝色",///////////////////////////////////////上下文。弧(长度/2、长度/2,长度/2 - 2 * r, 0, 2 * Math.PI);
context.fill ();
context.closePath ();
context.beginPath ();
上下文。字体=按蟮ā?(长度/2 - 2.5 * r)/2 +“px微软雅黑”;
上下文。fillStyle=" # ffffff”;
var=% +文本“%”;
textwidth=context.measureText .width(文本);
如果这一点。textheight==null) {
var p=document.createElement (“p”);
document.body.appendChild (p);
p。innerHTML=文本;
p.style。字形大?((长度/2 - 2.5 * r)/2) +“px”;
这一点。textheight=p.offsetHeight;
p.parentNode.removeChild (p)}
textheight=this.textheight;
上下文。fillText(文本、(长度- textwidth)/2,长度/2 + textheight/4);
context.fill ();
context.closePath ()}};
返回进步};>