CODEWITHSUNDEEP
javascriptjqueryhtmlcsscanvas
MoHamed HaSsn
MoHamed HaSsn

Reputation: 555

Divide Canvas Arc To 364 Days

My question is how to divide countdown days circular to 364 days, I mean when the number of remaining days is equal 364 days make circular like this:

enter image description here

and when the number of remaining days is equal 0 days make circular like this:

enter image description here

(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 = 100;


    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);
      day_arc_end = ((- days) * parseFloat((0.10471 * 5) / 2));
      context3.beginPath();
      context3.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + day_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: "18 january 2017 12:34: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>

The problem is here:

day_arc_end = ((-days) * parseFloat((0.10471 * 5) / 2));  // the problem is here

Upvotes: 1

Views: 84

Answers (1)

vassiliskrikonis
vassiliskrikonis

Reputation: 596

It should be something similar to:

// (((365-days)/365)*2 - 0.5)*Math.PI
context3.arc(centerX, centerY, radius, -0.5*Math.PI, (((365-days)/365)*2 - 0.5)*Math.PI, false);

Basically html canvas arc() begins drawing from (1, 0) in a unit cartesian or 3:00 if you look at the circle like a clock. Full circle is 1.5*Math.PI.

so 12:00 is -0.5*Math.PI, 03:00 is 0*Math.PI etc.

So in a more verbose way:

var percentageOfYear = (365-days)/365;
var fullCircleRads = 2*Math.PI;
var ending_arc = percentageOfYear*fullCircleRads - 0.5*Math.PI;

See: http://www.w3schools.com/TAgs/canvas_arc.asp

Upvotes: 1

Related Questions