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

我想在浏览器开始绘制填充图表之前添加 donut 背景。不幸的是，我需要使用 ctx.clearRect() 因为我有奇怪的视觉效果。有什么办法可以将这两个环结合起来吗？

Answer 1

是的，有一种方法，那就是在绘制填充图表之前，再绘制一条圆弧作为 donut 背景。

此外，您应该使用 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>