html5画布中做出圆形进度条并显示数字百分比的示例

　　介绍

小编给大家分享一下html5画布中做出圆形进度条并显示数字百分比的示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

html5画布上实现圆形进度条并显示数字百分比效果示例,具体如下:

实现效果

html5画布中做出圆形进度条并显示数字百分比的示例

1。首先创建html代码

& lt; canvas  id=癱anvas",宽度=?00“,身高=?00“,风格=氨尘?# 000;“祝辞& lt;/canvas>

2。创建帆布环境

var  canvas =, . getelementbyid(& # 39;帆布# 39;),,,//获取帆布元素 　　,,,,,,,,,,,context =, canvas.getContext (& # 39; 2 d # 39;),,,//获取画图环境,指明为2 d 　　,,,,,,,,,,,centerX =, canvas.width/2,,,,//画布中心点x轴坐标 　　,,,,,,,,,,,centerY =, canvas.height/2,,,//画布中心点y轴坐标 　　,,,,,,,,,,,rad =, Math.PI * 2/100,,//将360度分成100份,那么每一份就是rad度 　　,,,,,,,,,,,speed =, 0.1;,//加载的快慢就靠它了

3。绘制5像素宽的运动外圈

//绘制5像素宽的运动外圈 　　,,,,,,,function  blueCircle (n) { 　　,,,,,,,,,,,context.save (); 　　,,,,,,,,,,,context.strokeStyle =,“# fff",//设置描边样式 　　,,,,,,,,,,,context.lineWidth =, 5,,//设置线宽 　　,,,,,,,,,,,context.beginPath();,//路径开始 　　,,,,,,,,,,,context.arc (centerX, centerY,, 100,,, -Math.PI/2,, -Math.PI/2, + n * rad, false),,//用于绘制圆弧context.arc (x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针) 　　,,,,,,,,,,,context.stroke();,//绘制 　　,,,,,,,,,,,context.closePath();,//路径结束 　　,,,,,,,,,,,context.restore (); 　　,,,,,,,}

4。绘制白色外圈

//绘制白色外圈 　　,,,,,,,function  whiteCircle () { 　　,,,,,,,,,,,context.save (); 　　,,,,,,,,,,,context.beginPath (); 　　,,,,,,,,,,,context.lineWidth =, 2,,//设置线宽 　　,,,,,,,,,,,context.strokeStyle =,“red"; 　　,,,,,,,,,,,context.arc (centerX, centerY,, 100,,, 0,, Math.PI * 2,,假); 　　,,,,,,,,,,,context.stroke (); 　　,,,,,,,,,,,context.closePath (); 　　,,,,,,,,,,,context.restore (); 　　,,,,,,,}

5。百分比文字绘制

function 文本(n) { 　　,,,,,,,,,,,context.save();,//保存和恢复可以保证样式属性只运用于该段帆布元素 　　,,,,,,,,,,,context.strokeStyle =,“# fff",//设置描边样式 　　,,,,,,,,,,,context.font =,“40 px  Arial",,//设置字体大小和字体 　　,,,,,,,,,,,//绘制字体,并且指定位置 　　,,,,,,,,,,,context.strokeText (n.toFixed (0) +“%”;,, centerX-25,, centerY + 10); 　　,,,,,,,,,,,context.stroke();,//执行绘制 　　,,,,,,,,,,,context.restore (); 　　,,,,,,,}

6。让它运动起来

//动画循环 　　,,,,,,,(function 拉伸机(){ 　　,,,,,,,,,,,window.requestAnimationFrame(拉伸机); 　　,,,,,,,,,,,context.clearRect (0, 0, canvas.width,, canvas.height); 　　,,,,,,,,,,,whiteCircle (); 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

html5画布中做出圆形进度条并显示数字百分比的示例