效果图如下：动态加载的

实现代码如下：

<!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. 2019个人计划与Flag与期望

    突然发现写博客是真的好. 希望未来能在其他地方写上日记. 总结2018中的个人缺陷: 1.忘掉了学习方法或者说学习方法不正确 2.偶尔就会去偷下懒,对自己不够严格,自控能力差. 3.心态虽比以前好很多 ...

  2. 【JZOJ3379】查询

    description 对于一个整数序列,查询区间第k大数可以在O(logN)的时间内轻松完成.现在我们对这个问题进行推广. 考虑带重复数的集合(multiset).定义在该类集合上的并操作" ...

  3. Lydsy2017省队十连测

    5215: [Lydsy2017省队十连测]商店购物 可能FFT学傻了,第一反应是前面300*300背包,后面FFT... 实际上前面背包,后面组合数即可．只是这是一道卡常题,需要注意常数．． //A ...

  4. ROC曲线及AUC

    ROC曲线 意义 ROC曲线指受试者工作特征曲线 / 接收器操作特性曲线(receiver operating characteristic curve),是反映敏感性和特异性连续变量的综合指标,是用 ...

  5. BufferedReader用法

      BufferedReader由Reader类扩展而来,提供通用的缓冲方式文本读取,而且提供了很实用的readLine,读取一个文本行,从字符输入流中读取文本,缓冲各个字符,从而提供字符.数组和行的 ...

  6. java基础温习 -- Thread synchronized关键字

    synchronized 基本规则 1. 当一个线程访问“某对象”的“synchronized方法”或者“synchronized代码块”时,其他线程对“该对象”的该“synchronized方法”或 ...

  7. Python 中的运算符

    1.算数运算符 + 加 - 减 * 乘 计算字符串重复的次数 print("唯美" * 10) / 除 round(10/3, 4)   4代表位数 // 取整数 % 取余数 ** ...

  8. adb命令总结

  9. Oracle的UTL_FILE.FOPEN学习笔记

    Oracle提供的文件操作包UTL_FILE包中的UTL_FILE.FOPEN负责打开一个文件. UTL_FILE.FOPEN(location in varchar2, filename in va ...

  10. vector以及array和数组

    //比较数组.vector.array #include <iostream> #include <vector> #include <array> #includ ...