效果图如下：动态加载的

实现代码如下：

<!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. 【学术篇】luogu1558&&poj2777 色板游戏

    题目の传送门: luogu:https://www.luogu.org/problem/show?pid=1558 poj:http://poj.org/problem?id=2777 题目大意:给有 ...

  2. 单体内置对象——Global对象

    单体内置对象的定义:由ECMAScript实现提供的.不依赖于宿主环境的对象,这些对象在ECMAScript程序执行之前已经存在了.意思就是说:开发人员不必显式地实例化内置对象,因为他们已经实例化了. ...

  3. leetcode-第五场双周赛-1134-阿姆斯特朗数

    第一次提交: class Solution: def isArmstrong(self, N: int) -> bool: n = N l = len(str(N)) res = 0 while ...

  4. Tensortflow安装

    1.  CMD里面 pip install --upgrade --ignore-installed tensorflow

  5. thinkphp 区间查询

    ThinkPHP支持对某个字段的区间查询,例如: 富瑞华大理石平台厂家哪家好 $map['id'] = array(array('gt',1),array('lt',10)) ; 得到的查询条件是:  ...

  6. CF148D Bag of mice (期望dp)

    传送门 # 解题思路 ​    ~~这怕是本蒟蒻第一个独立做出来的期望$dp$的题,发篇题解庆祝一下~~.首先,应该是能比较自然的想出状态设计$f[i][j][0/1]$ 表示当前还剩 $i$个白老鼠 ...

  7. js页面的弹框怎么关闭啊

    1.单纯的关闭window.opener.location.reload(); //刷新父窗口中的网页window.close();//关闭当前窗窗口2.提交后关闭 function save(){d ...

  8. 主机入侵防御系统(HIPS)分析

    主机入侵防御系统(Host Intrusion Prevent System,HIPS)是近几年出现并迅速发展的新兴产物,与传统意义的防火墙和杀毒软件不同,它并不具备特征码扫描和主动杀毒等功能,所以想 ...

  9. 【源码】PyObject_VAR_HEAD 定长对象 变长对象

    PyObject_VAR_HEAD      Python-3.7.4\Include\object.h   /* PyObject_VAR_HEAD defines the initial segm ...

  10. VS2010文件包含

    一. 关于iostream.h VS2010的iostream不加.h在后面(加.h的是旧版本),把iostream作为类,正确使用方法: #include<iostream> using ...