圆形的进度条怎么写啊？？

我优艾设计网_平面设计想问下，圆形的进度条怎么写啊，在线等。。。

---

_WB2****2077 2021-07-07 00:11

主界面上的各个常驻元素需要尽可能的空出游戏画面，避免遮挡，在这个前提下大部分常驻元素会分布在界面的上方和下方两个横条内，横向的血条可以更加充分的利用这部分空间

都伴随怪物名称优艾设计网_设计百科同时显示，个人认为横向书写比纵向书写更便于阅读，尤其是在游戏内大部分文本都是横向书写的情况下，因此横向书写的名称基本只能选择放在怪物头顶，这时血条形状的选择就比较有限了，横向是一种不失美观且更易实现的形式，或者做成九阴真经NPC好感度那样的弧形，但我没觉得美观度有提升多少。

圆形的进度条或者是血条就是这样

---

M76****48 2021-0优艾设计网_Photoshop交流7-07 00:21

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

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

---

马鹏飞 优艾设计网_设计客 2021-07-07 00:27

你可以看一下这个教程，原理懂了就和做了

网页链接

---

无印良品0325 2021-07-07 00:28

//获取canvas对象

var c=document.ge优艾设计网_平面设计tElementById("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();

---

_WeCh****94191 2021-07-07 00:29

优艾设计网_设计LOGO 简单做法：画直线，把变形点调整至直线的一端，设置359帧，设置顺时针旋转一周，把每一帧转化为关键帧。

复制所有帧，每帧根据时间需要加普通帧。播放测试

---

M76****48 2021-07-07 00:35

优艾设计网_设计百科 android:angle="0"

android:centerColor="#ff5a5d5a"

android:centerY="0.75"

android:endColor="#ff747674"

android:startColor="#ff9d9e9d" />

android:angle="0"

android:centerColor="#80ffb600"

android:centerY="0.75"

android:endColor="#a0ffcb00"

android:startColor="#80ffd300" />

android:angle="0"

android:endColor="#8000ff00"

android:startColor="#80ff0000" />

---