jsとhtml5キャンバス要素を使用した放射状チャート

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（）を使用する必要があります。この2つのリングを組み合わせる方法はありますか？

Answer 1

はい、方法があり、それは、チャートを埋める描画する前に、ドーナツ背景のための別のアークを描く、です。

また、効率を上げるため、setInterval()の代わりにrequestAnimationFrame()を使用する必要があります。

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>