使用js和html5 canvas元素的徑向圖

Question

我正在嘗試在html5 canvas el上制作圓形圖表。

 (function () { var ctx = document.getElementById('canvas').getContext('2d'); var counter = 0; var start = 4.72; var cW = ctx.canvas.width; var cH = ctx.canvas.height; var diff; var maxVal = 44; function progressChart(){ diff = ((counter / 100) * Math.PI*2*10).toFixed(2); ctx.clearRect(0, 0, cW, cH); ctx.lineWidth = 15; ctx.fillStyle = '#ff883c'; ctx.strokeStyle = '#ff883c'; ctx.textAlign = 'center'; ctx.font = '25px Arial'; ctx.fillText(counter+'%', cW*.5, cH*.55, cW); ctx.beginPath(); ctx.arc(70, 70, 60, start, diff/10+start, false); ctx.stroke(); if(counter >= maxVal){ clearTimeout(drawChart); } counter++; } var drawChart = setInterval(progressChart, 20); })(); 

 <canvas id="canvas" width="140" height="140"></canvas> 

我想在瀏覽器開始繪制填充圖之前添加甜甜圈背景。 不幸的是，我需要使用ctx.clearRect（），因為我得到了奇怪的視覺效果。 有什么辦法可以組合這兩個戒指嗎？

Answer 1

是的，有一種方法，那就是在繪制填充圖之前為甜甜圈背景繪制另一個弧 。

另外，您應該使用requestAnimationFrame()而不是setInterval()來提高效率。

 var ctx = document.getElementById('canvas').getContext('2d'); var counter = 0; var start = 4.72; var cW = ctx.canvas.width; var cH = ctx.canvas.height; var diff; var maxVal = 44; var rAF; function progressChart() { diff = ((counter / 100) * Math.PI * 2 * 10).toFixed(2); ctx.clearRect(0, 0, cW, cH); ctx.lineWidth = 15; ctx.fillStyle = '#ff883c'; ctx.textAlign = 'center'; ctx.font = '25px Arial'; ctx.fillText(counter + '%', cW * .5, cH * .55, cW); // doughnut background ctx.beginPath(); ctx.arc(70, 70, 60, 0, Math.PI * 2, false); ctx.strokeStyle = '#ddd'; ctx.stroke(); // fill chart ctx.beginPath(); ctx.arc(70, 70, 60, start, diff / 10 + start, false); ctx.strokeStyle = '#ff883c'; ctx.stroke(); if (counter >= maxVal) { cancelAnimationFrame(rAF); return; } counter++; rAF = requestAnimationFrame(progressChart); } progressChart(); 

 <canvas id="canvas" width="140" height="140"></canvas>