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