效果图如下：动态加载的

实现代码如下：

<!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. telnet- Linux必学的60个命令

    1.作用 telnet表示开启终端机阶段作业,并登入远端主机.telnet是一个Linux命令,同时也是一个协议(远程登陆协议). 2.格式 telnet [-8acdEfFKLrx][-b][-e] ...

  2. 嘴巴题9 Codeforces 453A. Little Pony and Expected Maximum

    A. Little Pony and Expected Maximum time limit per test 1 second memory limit per test 256 megabytes ...

  3. Qt plugins（插件）目录

    今天在打包Qt程序时,出现了因为缺少插件,导致背景图无法显示的问题.第一次将plugins目录全部拷贝到了应用程序根目录下,还是无法运行.查阅资料,需要拷贝plugins子目录到应用程序跟目录.虽然最 ...

  4. LoadRunner参数化详解【转】

    距离上次使用loadrunner 已经有一年多的时间了.初做测试时在项目中用过,后面项目中用不到,自己把重点放在了工具之外的东西上,认为性能测试不仅仅是会用工具,最近又想有一把好的利器毕竟可以帮助自己 ...

  5. 根据table返回来的数据，动态展示组织名称

    <template> <div class="app-container calendar-list-container"> <el-card cla ...

  6. Python-函数基础(1)

    目录 函数定义 什么是函数? 定义函数三种形式 函数定义的特性 函数调用 函数返回值 return的特性: 函数的参数 有参函数 形参 位置形参 默认形参 实参 位置实参 关键字实参 可变长参数 形参 ...

  7. Ubuntu clion下载及激活

    1.下载 方法:去官网下载clion  https://www.jetbrains.com/clion/download/#section=linux 或者使用我上传的百度网盘链接: https:// ...

  8. react antd样式按需加载配置以及与css modules模块化的冲突问题

    通过create-react-app脚手架生成一个项目 然后运行npm run eject 把webpack的一些配置从react-scripts模块弹射出来, 方便自己手工增减,暴露出来的配置文件在 ...

  9. 朴素贝叶斯算法的python实现方法

    朴素贝叶斯算法的python实现方法 本文实例讲述了朴素贝叶斯算法的python实现方法.分享给大家供大家参考.具体实现方法如下: 朴素贝叶斯算法优缺点 优点:在数据较少的情况下依然有效,可以处理多类 ...

  10. 基于vue-cli的vs code设置

    vue-cli自带eslin校验,vs code采用下可以设置在保存文件时会自动纠正格式 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detec ...