如何为Canvas环形倒计时的标签后方环形内侧添加背景色

问题根因 #

Canvas 2D 绘图上下文不存在 backgroundColor 属性，你尝试修改的属性本身无效，所以不会产生任何效果。要实现环形内侧的背景填充，需要主动绘制一个实心圆形放在对应层级。

解决方法 #

在 unit 方法的清空画布操作之后、绘制环形边框之前，新增一段实心圆绘制逻辑即可，完整修改后的 unit 方法代码如下：

unit: function(idx,label,ring) {
    var x,y, value, ring_secs = ring.s;
    value = parseFloat($r.time/ring_secs);
    $r.time-=Math.round(parseInt(value)) * ring_secs;
    value = Math.abs(value);
    x = ($r.r_size*.5 + $r.r_thickness*.5);
    x +=+(idx*($r.r_size+$r.r_spacing+$r.r_thickness));
    y = $r.r_size*.5;
    y += $r.r_thickness*.5;


    // calculate arc end angle
    var degrees = 360-(value / ring.max) * 360.0;
    var endAngle = degrees * (Math.PI / 180);

    $r.ctx.save();

    $r.ctx.translate(x,y);
    $r.ctx.clearRect($r.actual_size*-0.5,$r.actual_size*-0.5,$r.actual_size,$r.actual_size);

    // ==== 新增代码 开始 ====
    // 绘制环形内侧填充背景
    $r.ctx.fillStyle = "#d0d0d0";
    $r.ctx.beginPath();
    // 第三个参数为背景圆半径，可按需调整，当前设置为环形内半径（减去边框厚度避免覆盖边框）
    $r.ctx.arc(0,0,$r.r_size/2 - $r.r_thickness,0,2 * Math.PI);
    $r.ctx.fill();
    // ==== 新增代码 结束 ====

    // first circle
    $r.ctx.strokeStyle = "#d0d0d0";
    $r.ctx.beginPath();
    $r.ctx.arc(0,0,$r.r_size/2,0,2 * Math.PI, 2);
    $r.ctx.lineWidth =$r.r_thickness;
    $r.ctx.stroke();

    // second circle
    $r.ctx.strokeStyle = "#D34168";
    $r.ctx.beginPath();
    $r.ctx.arc(0,0,$r.r_size/2,0,endAngle, 1);
    $r.ctx.lineWidth =$r.r_thickness;
    $r.ctx.stroke();

    // label
    $r.ctx.fillStyle = "#000000";

    $r.ctx.font = '16px Roboto';
    $r.ctx.fillText(label, 0, 30);
    $r.ctx.fillText(label, 0, 30);

    $r.ctx.font = '54px Roboto';
    $r.ctx.fillText(Math.floor(value), 0, 0);

    $r.ctx.restore();
}

如果需要调整背景色，直接修改 fillStyle 的色值即可；如果需要调整背景圆的大小，修改 arc 方法的第三个半径参数即可。

内容的提问来源于stack exchange，提问作者Dror Shalit