为戒指添加背景颜色

Question

i have this code that creates countdown with rings credit to the developer codepen

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

how I can add a background color to the inner side of the ring behind the labels? i was trying to add this code to each section $r.ctx.backgroundColor = "#d0d0d0"; but nothing happened i can see some style attributes but every thing it didn't did not effect the background color behind the label

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

Answer 1

You need a third arc that will hold the background color.

Add this code to around line 88 or so:

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