html5canvas半圆环百分⽐进度条动画特效
<!DOCTYPE html>
<html>
html特效代码时间日期<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>动态画⼀半圆环</title>
</head>
<body>
<div class="ring" >
<canvas id="tutorial" width="125" height="125"></canvas>
<div class="fraction"><span class="numberOne">95</span></div>
<span class="title">半圆环</span>
</div>
<script>
let radius = 60; //外环半径
let thickness = 10; //圆环厚度
let innerRadius = radius - thickness; //内环半径
let startAngle = -90; //开始⾓度
let endAngle = 180; //结束⾓度
let x = 0; //圆⼼x坐标
let y = 0; //圆⼼y坐标
let canvas = ElementById("tutorial");
canvas.width = 125;
canvas.height = 125;
let ctx = Context("2d");
ctx.fillStyle = "#eee"; //初始填充颜⾊
renderRing(startAngle, endAngle);
//渲染函数
function renderRing(startAngle, endAngle) {
ctx.beginPath();
//绘制外环
ctx.arc(x, y, radius, angle2Radian(startAngle), angle2Radian(endAngle));
//计算外环与内环第⼀个连接处的中⼼坐标
let oneCtrlPoint = calcRingPoint(
x,
y,
innerRadius + thickness / 2,
endAngle
);
//绘制外环与内环第⼀个连接处的圆环
ctx.arc(
oneCtrlPoint.x,
oneCtrlPoint.y,
thickness / 2,
angle2Radian(-90),
angle2Radian(270)
);
// //绘制内环
ctx.arc(
x,
y,
innerRadius,
angle2Radian(endAngle),
angle2Radian(startAngle),
true
);
//计算外环与内环第⼆个连接处的中⼼坐标
let twoCtrlPoint = calcRingPoint(
x,
y,
innerRadius + thickness / 2,
startAngle
);
//绘制外环与内环第⼆个连接处的圆环
ctx.arc(
twoCtrlPoint.x,
twoCtrlPoint.y,
thickness / 2,
angle2Radian(-90),
angle2Radian(270)
)
;
ctx.fill();
// ctx.stroke()
}
//计算圆环上点的坐标
function calcRingPoint(x, y, radius, angle) {
let res = {};
res.x = x + radius * s((angle * Math.PI) / 180);
res.y = y + radius * Math.sin((angle * Math.PI) / 180);
return res;
}
/
/弧度转⾓度
function radian2Angle(radian) {
return (180 * radian) / Math.PI;
}
//⾓度转弧度
function angle2Radian(angle) {
return (angle * Math.PI) / 180;
}
//进度条颜⾊
var lingrad = ateLinearGradient(0, 0, 150, 0);
lingrad.addColorStop(0, "#00ABEB");
lingrad.addColorStop(1, "#fff");
ctx.fillStyle = lingrad;
//开始绘画
let tempAngle = startAngle;
let total = 1000; //总分
let now = 950; //当前分数
let percent = now / total; //百分⽐
let twoEndAngle = percent * 270 + startAngle;
let step = (twoEndAngle - startAngle) / 80;
let numberSpan = document.querySelector(".numberOne");
let inter = setInterval(() => {
if (tempAngle > twoEndAngle) {
clearInterval(inter);
} else {
numberSpan.innerText = percent * 100;
tempAngle += step;
}
renderRing(startAngle, tempAngle);
}, 20);
</script>
</body>
</html>
vue中使⽤圆环可以直接使⽤element-ui组件库    elementui地址：element.eleme/#/zh-CN/component/progress

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。