キャンバスサーキュラータイマーを364個に分割

Question

私はキャンバスでカウントダウンタイマーサーキュラーを作成していますが、デイジーサークルが364日で分けられる必要があり、デイズサークルが364日より大きい場合、デイクルサークルは消えます。
私は必要なもの はこのようなものです：

(function($) { 
 
    jQuery.fn.countdown = function(options, callback) { 
 
    var settings = { 
 
     'date': null 
 
    }; 
 
    if (options) { 
 
     $.extend(settings, options); 
 
    } 
 
    this_sel = $(this); 
 
    /*Canvas JavaScript*/ 
 
    var canvas = document.getElementById('myCanvas'); 
 
    var canvas1 = document.getElementById('myCanvas1'); 
 
    var canvas2 = document.getElementById('myCanvas2'); 
 
    var canvas3 = document.getElementById('myCanvas3'); 
 
    var context = canvas.getContext('2d'); 
 
    var context1 = canvas1.getContext('2d'); 
 
    var context2 = canvas2.getContext('2d'); 
 
    var context3 = canvas3.getContext('2d'); 
 
    var centerX = canvas.width/2; 
 
    var centerY = canvas.height/2; 
 
    var radius = 70; 
 

 

 
    var sec_arc_end = 0, 
 
     min_arc_end = 0, 
 
     hour_arc_end = 0, 
 
     day_arc_end = 0; 
 

 
    function count_exec() { 
 
     eventDate = Date.parse(settings['date'])/1000; 
 
     currentDate = Math.floor($.now()/1000); 
 
     if (eventDate <= currentDate) { 
 
     callback.call(this); 
 
     clearInterval(interval); 
 
     } 
 
     seconds = eventDate - currentDate; 
 

 
     days = Math.floor(seconds/(60 * 60 * 24)); 
 

 
     seconds -= days * 60 * 60 * 24; 
 
     hours = Math.floor(seconds/(60 * 60)); 
 
     seconds -= hours * 60 * 60; 
 
     minutes = Math.floor(seconds/60); 
 
     seconds -= minutes * 60; 
 

 
     // seconds arc canvas................... 
 
     context.clearRect(50, 50, canvas.width, canvas.height); 
 
     sec_arc_end = ((60 - seconds) * parseFloat(0.10472)); 
 
     context.beginPath(); 
 
     context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + sec_arc_end, false); 
 
     context.lineWidth = 8; 
 
     context.strokeStyle = '#14E170'; 
 
     context.stroke(); 
 

 
     // minutes arc canvas................... 
 
     context1.clearRect(50, 50, canvas.width, canvas.height); 
 
     min_arc_end = ((60 - minutes) * parseFloat(0.10471)); 
 
     context1.beginPath(); 
 
     context1.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + min_arc_end, false); 
 
     context1.lineWidth = 8; 
 
     context1.strokeStyle = '#14E170'; 
 
     context1.stroke(); 
 
     // hours arc canvas................... 
 

 
     context2.clearRect(50, 50, canvas.width, canvas.height); 
 
     hour_arc_end = ((24 - hours) * parseFloat((0.10471 * 5)/2)); 
 
     context2.beginPath(); 
 
     context2.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + hour_arc_end, false); 
 
     context2.lineWidth = 8; 
 
     context2.strokeStyle = '#14E170'; 
 
     context2.stroke(); 
 
     // days arc canvas................... 
 
     // the problem is here 
 
     context3.clearRect(50, 50, canvas.width, canvas.height); 
 
     hour_arc_end = ((days) * parseFloat((0.10471) * 2)); 
 
     context3.beginPath(); 
 
     context3.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + hour_arc_end, false); 
 
     context3.lineWidth = 8; 
 
     context3.strokeStyle = '#14E170'; 
 
     context3.stroke(); 
 
     // add 0 value to left of value 
 
     if (!isNaN(eventDate)) { 
 
     this_sel.find('.days').text(days); 
 
     this_sel.find('.hours').text(hours); 
 
     this_sel.find('.mins').text(minutes); 
 
     this_sel.find('.secs').text(seconds); 
 
     } 
 
    } 
 
    count_exec(); 
 
    console.log(days); 
 
    interval = setInterval(count_exec, 1000); 
 

 

 
    }; 
 
})(jQuery); 
 
$(document).ready(function() { 
 
    $("#countdown").countdown({ 
 
     date: "20 january 2017 13:30:00" 
 
    }, 
 
     function() { 
 
      $("#countdown").text("merry christmas"); 
 
     } 
 
    ); 
 
    $(".countdown-container").height($(".countdown-container").width()); 
 
    $(window).resize(function() { 
 
     $(".countdown-container").height($(".countdown-container").width()); 
 
    }); 
 
})

#countdown { 
 
    width: 100%; 
 
    height: 150px; 
 
    background-color: grey; 
 
    padding: 5px; 
 
} 
 
.countdown-container { 
 
    width: 24%; 
 
    height: 97%; 
 
    text-align: center; 
 
} 
 
#countdown .countdown-container { 
 
    text-align: center; 
 
    float: left; 
 
    position: relative; 
 
    margin: 0.30% 0.5% 0.30% 0.5%; 
 
} 
 
#countdown .countdown-container .contents { 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
    font-size-adjust: 0.58; 
 
} 
 
.contents div { 
 
    font-size: 28px; 
 
} 
 
.contents span { 
 
    font-size: 16px; 
 
} 
 
canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
    border:1px solid #ff6a00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="countdown"> 
 
     <div class="countdown-container"> 
 
      <div class="contents"> 
 
       <div class="secs"> 
 
        00 
 
       </div> 
 
       <span>Seconds</span> 
 
      </div> 
 
      <canvas id="myCanvas" width="250" height="250"></canvas> 
 

 
     </div> 
 
     <div class="countdown-container"> 
 
      <div class="contents"> 
 
       <div class="mins"> 
 
        00 
 
       </div> 
 
       <span>Minutes</span> 
 
      </div> 
 
      <canvas id="myCanvas1" width="250" height="250"></canvas> 
 
     </div> 
 
     <div class="countdown-container"> 
 
      <div class="contents"> 
 
       <div class="hours"> 
 
        00 
 
       </div> 
 
       <span>Hours</span> 
 
      </div> 
 
      <canvas id="myCanvas2" width="250" height="250"></canvas> 
 
     </div> 
 
     <div class="countdown-container"> 
 
      <div class="contents"> 
 
       <div class="days"> 
 
        00 
 
       </div> 
 
       <span>Days</span> 
 
      </div> 
 
      <canvas id="myCanvas3" width="250" height="250"></canvas> 
 
     </div> 
 
    </div>

Answer 1

私は私の答えを編集しました。これはそれを行う必要があります。それは少し冗長ですが、それぞれの状況を説明します。あなたが下のコードで異なる日の割り当てをコメントアウトすると、自分で見ることができます。また、endAngleに負の値を使用することで、円を逆方向に描画して、探しているカウントダウンエフェクトを提供します。

...other code... 

// days arc canvas................... 
context3.clearRect(50, 50, canvas.width, canvas.height); 
context3.beginPath(); 
var startAngle = Math.PI/-2; 
var fullYear = (2 * Math.PI); 
var perDayAngle = (fullYear/365); 
var days = 0; 
//var days = 364; 
//var days = 367; 
var endAngle = (perDayAngle * days) - startAngle; 
if(days == 0) { 
    endAngle = startAngle - fullYear; 
} 
else if (days > 364) { 
    endAngle = -startAngle; 
} 
context3.arc(70, 100, 50, startAngle, -endAngle); 
context3.stroke();