javascript - 为戒指添加背景颜色

Question

我有这段代码可以创建倒计时，并归功于开发人员 codepen

https://codepen.io/l422y/pen/cdwhm

如何在标签后面的环内侧添加背景颜色？我试图将此代码添加到每个部分 $r.ctx.backgroundColor = "#d0d0d0"; 但什么也没发生我可以看到一些样式属性，但它没有影响标签后面的背景颜色的每一件事

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

   var ringer = {
    countdown_to: new Date("25/11/2021") ,
    rings: {
        'DAYS': {
            s: 86400000, // mseconds in a day,
            max: 365
        },
        'HOURS': {
            s: 3600000, // mseconds per hour,
            max: 24
        },
        'MINUTES': {
            s: 60000, // mseconds per minute
            max: 60
        },
        'SECONDS': {
            s: 1000,
            max: 60
        },

    },
    r_count: 4,
    r_spacing: 40, // px
    r_size: 120, // px
    r_thickness: 2, // px
    update_interval: 11, // ms


    init: function(){

        $r = ringer;
        $r.cvs = document.createElement('canvas');

        $r.size = {
            w: ($r.r_size + $r.r_thickness) * $r.r_count + ($r.r_spacing*($r.r_count-1)),
            h: ($r.r_size + $r.r_thickness)
        };



        $r.cvs.setAttribute('width',$r.size.w);
        $r.cvs.setAttribute('height',$r.size.h);
        $r.ctx = $r.cvs.getContext('2d');
        $(".countdownwrap").append($r.cvs);
        $r.cvs = $($r.cvs);
        $r.ctx.textAlign = 'center';
        $r.actual_size = $r.r_size + $r.r_thickness;
        $r.countdown_to_time = new Date($r.countdown_to).getTime();
        $r.cvs.css({ width: $r.size.w+"px", height: $r.size.h+"px" });
        $r.go();
    },
    ctx: null,
    go: function(){
        var idx=0;

        $r.time = (new Date().getTime()) - $r.countdown_to_time;


        for(var r_key in $r.rings) $r.unit(idx++,r_key,$r.rings[r_key]);

        setTimeout($r.go,$r.update_interval);
    },
    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);

        // 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();
    }
}

ringer.init();

</script>

标签： javascripthtmlcss

Answer 1

您需要第三条弧线来保持背景颜色。

将此代码添加到第 88 行左右：

    // background color circle
    $r.ctx.beginPath();
    $r.ctx.arc(0,0,$r.r_size/2,0,2 * Math.PI, 2);
    $r.ctx.fillStyle = "rgba(200,50,50,0.5)";
    $r.ctx.fill();