<!DOCTYPE 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" style="text-align: center;">
<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 = document.getElementById("tutorial");
canvas.width = 125;
canvas.height = 125;
let ctx = canvas.getContext("2d");
ctx.translate(canvas.width / 2, canvas.height / 2); //將繪圖原點移到畫布中央
ctx.rotate(angle2Radian(225)); //將畫布旋轉225度
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 * Math.cos((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 = ctx.createLinearGradient(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地址 ：https://element.eleme.cn/#/zh-CN/component/progress
