jsは環状プログレスバーとパーセンテージバーを描きます.

5457 ワード

コードを先に貼り付けます




  
  
       



  

canvas

canvas

/** * * @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...