使用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>