半圆形进度条(html)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>半环形进度条</title>
</head>
<style></style><body><canvas id="canvas" width="150" height="150"><p>抱歉，您的浏览器不支持canvas</p></canvas><script>toCanvas('canvas','red',30);/***  生成环形进度条*/function toCanvas(id, color, progress) {//canvas进度条var canvas = document.getElementById(id),ctx = canvas.getContext("2d"),percent = progress, //最终百分比circleX = canvas.width / 2, //中心x坐标circleY = canvas.height / 2, //中心y坐标radius = 60, //圆环半径cradius = 75, // canvas半径lineWidth = 6, //圆形线条的宽度fontSize = 20; //字体大小//两端圆点function smallcircle1(cx, cy, r) {ctx.beginPath();//ctx.moveTo(cx + r, cy);ctx.lineWidth = 1;ctx.fillStyle = '#06a8f3';ctx.arc(cx, cy, r, 0, Math.PI * 2);ctx.fill();}function smallcircle2(cx, cy, r) {ctx.beginPath();//ctx.moveTo(cx + r, cy);ctx.lineWidth = 1;ctx.fillStyle = '#fff';ctx.arc(cx, cy, r, 0, Math.PI * 2);ctx.fill();}//画圆function circle(cx, cy, r) {ctx.beginPath();//ctx.moveTo(cx + r, cy);ctx.lineWidth = lineWidth;ctx.strokeStyle = '#eee';ctx.arc(cx, cy, r, Math.PI * 2 / 3, Math.PI * 1 / 3);ctx.stroke();}//画弧线function sector(cx, cy, r, startAngle, endAngle, anti) {ctx.beginPath();//ctx.moveTo(cx, cy + r); // 从圆形底部开始画ctx.lineWidth = lineWidth;// 渐变色 - 可自定义// var linGrad = ctx.createLinearGradient(//     circleX-radius-lineWidth, circleY, circleX+radius+lineWidth, circleY// );// linGrad.addColorStop(0.0, '#06a8f3');// //linGrad.addColorStop(0.5, '#9bc4eb');// linGrad.addColorStop(1.0, '#00f8bb');// ctx.strokeStyle = linGrad;// 进度条颜色ctx.strokeStyle = color;//圆弧两端的样式ctx.lineCap = 'round';//圆弧ctx.arc(cx, cy, r,(Math.PI * 2 / 3),(Math.PI * 2 / 3) + endAngle / 100 * (Math.PI * 5 / 3),false);ctx.stroke();}//刷新function loading() {if (process >= percent) {clearInterval(circleLoading);}//清除canvas内容ctx.clearRect(0, 0, circleX * 2, circleY * 2);//中间的字ctx.font = fontSize + 'px April';ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.fillStyle = '#999';ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY);//圆形circle(circleX, circleY, radius);//圆弧sector(circleX, circleY, radius, Math.PI * 2 / 3, process);//两端圆点smallcircle1(cradius + Math.cos(2 * Math.PI / 360 * 120) * radius, cradius + Math.sin(2 * Math.PI / 360 * 120) *radius, 0);smallcircle2(cradius + Math.cos(2 * Math.PI / 360 * (120 + process * 3)) * radius, cradius + Math.sin(2 * Math.PI /
360* (120 + process * 3)) * radius, 2);//控制结束时动画的速度if (process / percent > 0.90) {process += 0.30;} else if (process / percent > 0.80) {process += 0.55;} else if (process / percent > 0.70) {process += 0.75;} else {process += 1.0;}}var process = 0.0; //进度var circleLoading = window.setInterval(function() {loading();}, 20);}</script>
</body></html>

半圆形进度条(html)相关推荐

进度条上的小圆点怎么做_Android自定义带圆点的半圆形进度条
本文实例为大家分享了Android自定义带圆点的半圆形进度条,供大家参考,具体内容如下仅限用于半圆形,如须要带圆点的圆形进度条,圆点会出现错位现象,此代码仅供,带圆点的圆形进度条有空研究一下!图片效 ...
android 锥形进度条,canvas锥形渐变进度条
从一个渐变圆角进度条浅出画一个圆开始这一切需要从一个(简单)的需求开始,在最开始对设计第一眼看到这张图的时候,感觉挺简单的嘛,直接用echarts饼图模拟出来一个就好了 echarts 然后上ec ...
android 锥形进度条,canvas锥形进度条怎么渐变
从一个渐变圆角进度条浅出画一个圆开始这一切需要从一个(简单)的需求开始,在最开始对设计第一眼看到这张图的时候,感觉挺简单的嘛,直接用echarts饼图模拟出来一个就好了 echarts 然后上ec ...
web app升级—带进度条的App自动更新
带进度条的App自动更新,效果如下图所示: 技术:vue.vant-ui.5+ 封装独立组件AppProgress.vue: <template><div><van- ...
html资源文件记载进度条,用进度条显示文件读取进度《 HTML5：文件 API 》
在这个文档里,我添加了一个标签 .. 上面定义了一个 ID 是 eventstatus - 我们可以把进度条放在这个容器里面 - 先找到用来显示进度条的容器 - // 找到显示事件状态的容器 var ...
android炫酷的自定义view,Android自定义View实现炫酷进度条
本文实例为大家分享了Android实现炫酷进度条的具体代码,供大家参考,具体内容如下下面我们来实现如下效果: 第一步:创建attrs文件夹,自定义属性: 第二步:自定义View: /** * Cre ...
python特效进度条_六种酷炫Python运行进度条
作者 | 行哥来源 | 一行数据之前行哥给大家推荐过一个windows神器,里面有个小功能是人生进度条,可以看到2020年的进度只剩下一半,那么你的代码进度还剩多少呢? 这不,行哥本文介绍了目前6 ...
html 可调节进度条控件,jQuery简单实用的轻量级进度条插件
jQMeter是一款简单实用的轻量级进度条jQuery插件,它可以显示为水平或垂直进度条,进度条加载时带有动画特效,你只需要简单的传入一些参数到jQMeter对象的构造函数中就可以完成你想要的进度条效 ...

半圆形进度条(html)

半圆形进度条(html)相关推荐

最新文章

热门文章