Блог

Главная - Вопросы по программированию - добавление цвета фона в кольцо

добавление цвета фона в кольцо

#javascript #html #css

Вопрос:

у меня есть этот код, который создает обратный отсчет с кольцами благодаря разработчику 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>

Ответ №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();
Метки: