html5怎么在圆形进度条中间放文字

html-css023

html5怎么在圆形进度条中间放文字,第1张

这个是在进度条圆形中又画了一个空白的小圆,然后写的文字

http://blog.csdn.net/tangdou5682/article/details/52778766

就是统计数据流量我们常用到的一个圆形,里面色彩填充,可以了解到某个数据占的一定比例。

首先了解一下需要用到的标签:

我们把他写到文档里面去,首先简单建立一个项目,在index.htmlL中把标签写进去

同步到真机测试一下,可以看到一下的

这样就完成了一个简单的进度条

更多的代码可在官网文档中查看

//获取canvas对象

var c=document.getElementById("myCanvas")

//getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

var ctx=c.getContext("2d")

ctx.beginPath()

ctx.arc(95,50,40,0,2*Math.PI)

//设置字体大小和字体样式

ctx.font="30px Arial"

//设置文本

ctx.fillText("Hello World",10,50)

ctx.stroke()