效果图如下：动态加载的

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.midLeft {
width: 250px;
height: 250px;
position: absolute;
left: 0;
top: 0;
background-color: #000;
}
#canvas{
position: absolute;
left: -25px;
top: -24px;
}
</style>
</head>
<body>
<div class="midLeft">
<div class="left">
<canvas width="252" height="252" id="process"></canvas>
<canvas width="300" height="300" id="canvas"></canvas>
</div>
</div>
<script type="text/javascript">
// 技能
var c = document.getElementById("process");
var ctx = c.getContext('2d'),
centerX = c.width / 2, //Canvas中心点x轴坐标
centerY = c.height / 2, //Canvas中心点y轴坐标
rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
speed = 0.1; //加载的快慢就靠它了
// 加载快慢
animate();
function animate() {
window.requestAnimationFrame(function () {
if (speed < 82) {
animate();
}
});
ctx.clearRect(0, 0, c.width, c.height);
speed += 0.4;
drawCircle(ctx, speed);
};
function drawCircle(ctx, percent) {
//画进度环
ctx.save();
ctx.strokeStyle = "#1e8c5c";
ctx.lineWidth = 16;
ctx.beginPath();
ctx.arc(centerX, centerY, 100, 149.8, -Math.PI / 2 + percent * rad + 120, false);
ctx.stroke();
ctx.closePath();
ctx.restore();
//百分比文字绘制
ctx.save();
ctx.fillStyle = "#fff";
ctx.font = "bold 21px Arial";
//绘制字体并指定位置
ctx.fillText('成功率', centerX - 25, centerY);
ctx.fillText(percent.toFixed(0) + '%', centerX - 15, centerY + 20);
ctx.restore();
}
// 内部进度条
var cont = document.getElementById('canvas');
var context = cont.getContext('2d');
var center_X = cont.width / 2; //Canvas中心点x轴坐标
var center_Y = cont.height / 2; //Canvas中心点y轴坐标
animate_c();
function animate_c() {
window.requestAnimationFrame(function () {
if (speed < 82) {
animate_c();
}
});
context.clearRect(0, 0, cont.width, cont.height);
speed += 0.4;
drawCircle_c(context, speed);
};
function drawCircle_c(ctx, percent) {
//画进度环
ctx.save();
ctx.strokeStyle = "#4e5866";
ctx.lineWidth = 12;
ctx.beginPath();
ctx.arc(center_X, center_Y, 80, 119.9, -Math.PI / 2 + 90.1 + percent * rad, false);
ctx.stroke();
ctx.closePath();
ctx.restore();
for (var i = 0; i < 12; i++) {
//保存当前状态
ctx.save();
//刻度粗细
ctx.lineWidth = 7;
//刻度颜色
ctx.strokeStyle = "#000"
//设置00点,以画布中心为00
ctx.translate(center_X, center_Y);
//设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
ctx.rotate(i * 30 * Math.PI / 180);
ctx.beginPath();
//刻度起始点
ctx.moveTo(0, -74);
//刻度结束点
ctx.lineTo(0, -108);
ctx.closePath();
ctx.stroke();
//将旋转后的图片返回原画布
ctx.restore();
}
}
</script>
<script src="./js/jquery/jquery.min.js"></script>
</body>
</html>

canvas扇形进度圈动态加载的更多相关文章

  1. Canvas——使用定时器模拟动态加载动画！

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. Android中插件开发篇之----动态加载Activity(免安装运行程序)

    一.前言 又到周末了,时间过的很快,今天我们来看一下Android中插件开发篇的最后一篇文章的内容:动态加载Activity(免安装运行程序),在上一篇文章中说道了,如何动态加载资源(应用换肤原理解析 ...

  3. Android 动态加载 （二） 态加载机制 案例二

    探秘腾讯Android手机游戏平台之不安装游戏APK直接启动法 重要说明 在实践的过程中大家都会发现资源引用的问题,这里重点声明两点: 1. 资源文件是不能直接inflate的,如果简单的话直接在程序 ...

  4. netcore实践：跨平台动态加载native组件

    缘起netcore框架下实现基于zmq的应用. 在.net framework时代,我们进行zmq开发由很多的选择,比较常用的有clrzmq4和NetMQ. 其中clrzmq是基于libzmq的Int ...

  5. Cesium中Clock控件及时间序列瓦片动态加载

    前言 前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合.Cesium的强大之处也在于其 ...

  6. OpenLayers学习笔记（十）— 动态加载JSON数据模拟航迹线

    在openlayers 3 上,加载本地json数据,动态绘制航迹线,以飞机当前位置为地图中心,此例子是模拟DEMO 本文链接:动态加载JSON数据模拟航迹线 作者:狐狸家的鱼 GitHub:八至 前 ...

  7. ECharts使用—折线图动态加载

    最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...

  8. jQuery页面滚动图片等元素动态加载实现

    一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...

  9. Java实现窗体动态加载磁盘文件

    在使用图形界面操作系统时,当打开一个文件夹系统会自动列出该文件夹下的所有文件及子文件夹.本实例实现了类似的功能:首先让用户选择一个文件夹,程序会动态列出该文件夹下的所有文件:如果该文件是隐藏文件,就在 ...

随机推荐

  1. 阿里云容器服务通过LoadBalancer暴露IPv6服务

    背景: IPv4地址已接近枯竭,被誉为下一代互联网技术的IPv6成为新的“全球互联网门牌号”,它可以让地球上的每一粒沙子都拥有地址.当下,各国都在加速推进下一代互联网的部署,工信部也互联网服务商提出了 ...

  2. sde中导入shp报错

    在向sde中的数据集导入shp数据,发现报如下错误:

  3. 深入浅出 Java Concurrency (29): 线程池 part 2 Executor 以及Executors[转]

    Java里面线程池的顶级接口是Executor,但是严格意义上讲Executor并不是一个线程池,而只是一个执行线程的工具.真正的线程池接口是ExecutorService. 下面这张图完整描述了线程 ...

  4. 笔试之const问题

    1 . ; int *j=(int *)&i; *j=; cout<<i<<*j<<endl; 答案i为0,*j为1. 2. char * const p= ...

  5. mysql之sql优化

    sql的执行顺序: 先看下下面两条多表关联sql,第1条查询到1条记录,第2条查无记录: on 筛选条件在笛卡尔积之前,where筛选条件在笛卡尔积之后执行 先执行from, join的话,左连接,左 ...

  6. 关于c.toArray might (incorrectly) not return Object[] (see 6260652)的问题解答

    最近学习jdk1.8源码时,发现ArrayList(Collection<? extends E> c)这个构造函数中,有句有意思的描述:c.toArray might (incorrec ...

  7. Python学习day43-数据库(多表关系)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  8. 玩转大数据系列之Apache Pig如何与Apache Solr集成（二）

    散仙,在上篇文章中介绍了,如何使用Apache Pig与Lucene集成,还不知道的道友们,可以先看下上篇,熟悉下具体的流程. 在与Lucene集成过程中,我们发现最终还要把生成的Lucene索引,拷 ...

  9. 2019-10-31-C#-dotnet-获取整个局域网的-ip-地址

    title author date CreateTime categories C# dotnet 获取整个局域网的 ip 地址 lindexi 2019-10-31 08:57:55 +0800 2 ...

  10. HBase与传统关系数据库的对比分析