jsは環状プログレスバーとパーセンテージバーを描きます.
5457 ワード
コードを先に貼り付けます
/**
*
* @param {number} cx x
* @param {number} cy y
* @param {number} r
* @param {number} lineWidth
* @return null
*/
function circle(ctx, cx, cy, r, lineWidth) {
if (!ctx) return
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = '#eee';
ctx.arc(cx, cy, r, 0, (Math.PI * 2), true);
ctx.stroke();
}
/**
*
* @param {number} cx x
* @param {number} cy y
* @param {number} r
* @param {number} lineWidth
* @param {number} startAngle 360
* @param {number} endAngle 360
* @return null
*/
function sector(ctx, cx, cy, r, lineWidth, startAngle = 0, endAngle = 360) {
if (!ctx) return
ctx.beginPath();
ctx.lineWidth = lineWidth;
//
let linGrad = ctx.createLinearGradient(
cx - r - lineWidth, cy, cx + r + lineWidth, cy
);
linGrad.addColorStop(0.0, '#ffcc99');
linGrad.addColorStop(0.5, '#99ff66');
linGrad.addColorStop(1.0, '#66ccff');
ctx.strokeStyle = linGrad;
//
// ctx.strokeStyle = 'red';
//
ctx.lineCap = 'round';
//
const _startAng = Math.PI * ((startAngle - 90) / 180)
const _endAng = Math.PI * ((endAngle - 90) / 180)
ctx.arc(
cx, cy, r,
_startAng,
_endAng,
false
);
ctx.stroke();
}
/**
*
* @param {number} cx x
* @param {number} cy y
* @param {number} r
* @param {number} lineWidth
* @param {number} process
* @return null
*/
function freshProgress(ctx, cx, cy, r, lineWidth, process) {
if (!ctx) return
// canvas
ctx.clearRect(0, 0, cx * 2, cy * 2);
//
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#999';
ctx.fillText(parseFloat(process).toFixed(0) + '%', cx, cy);
//
circle(ctx, cx, cy, r, lineWidth);
//
sector(ctx, cx, cy, r, lineWidth, 0, process * 3.6);
}
/**
*
* @param {string} id canvas id
* @param {number} progress 100
* @param {number} time p.s.
*/
function drawProgress(id, progress, time = 1) {
const canvas = document.getElementById(id), // canvas
circleX = canvas.width / 2, // x
circleY = canvas.height / 2, // y
radius = 100, //
lineWidth = 20, //
delay = time / progress * 1000; //
const ctx = canvas.getContext("2d");
let nowProgress = 0; //
let circleLoading = window.setInterval(function () {
if (nowProgress > progress) {
clearInterval(circleLoading);
} else {
freshProgress(ctx, circleX, circleY, radius, lineWidth, nowProgress);
nowProgress += 1.0;
}
}, delay);
}
/**
*
* @param {number} cx x
* @param {number} cy y
* @param {number} r
* @param {number} lineWidth
* @param {array} data number
* @param {number} process
* @return null
*/
function freshPrecentage(ctx, cx, cy, r, lineWidth, data, process) {
if (!ctx) return
// canvas
ctx.clearRect(0, 0, cx * 2, cy * 2);
if (data.length) {
const sum = data.reduce((prev, next) => prev + next)
const space = data.length > 1 ? (data.length) * 15 : 0;
let _startAng = 0
const resmap = data.map(element => {
const item = { startAngle: _startAng, endAngle: _startAng + element / sum * (360 - space), element, sum }
if (process >= _startAng) {
const endArg = Math.min(item.endAngle, process)
sector(ctx, cx, cy, r, lineWidth, item.startAngle, endArg);
}
_startAng = item.endAngle + 15
return item
});
}
}
/**
*
* @param {string} id canvas id
* @param {array} data number
* @param {number} time p.s.
*/
function drawPercentage(id, data = [], time = 1) {
const canvas = document.getElementById(id), // canvas
circleX = canvas.width / 2, // x
circleY = canvas.height / 2, // y
radius = 100, //
lineWidth = 20, //
delay = time * 10;
const ctx = canvas.getContext("2d");
console.log(delay)
let nowProgress = 0; //
let circleLoading = window.setInterval(function () {
if (nowProgress > 100) {
clearInterval(circleLoading);
} else {
freshPrecentage(ctx, circleX, circleY, radius, lineWidth, data, nowProgress * 3.6)
nowProgress += 1.0;
}
}, delay);
}
//
drawProgress('cycCanvas', 80);
drawPercentage('cycCanvas1', [1, 2, 3, 4]);
効果展示https://momokara-1251707696.c...