1

I am trying to do a sample weather application for a quite long time now, but can not produce the same effect as seen here. Basically, it has to show sunrise and sunset information, but use similar effects in visualization.

Can someone assist on how to make the same shape and add the code below to it so it would produce the same effects?

The blue area effect is seen here below with this code.

But I can not make the shapes to work with the effect. Can someone assist on how to make the shapes so sunrise sunset would work properly. The colored blue areas are actually hollow, meaning the animation code fills the shapes relative to time passed. enter image description here

The code uses circle properties at the moment, but are there any shapes that can be made so, it would look like in the image.

var c1 = document.getElementById("canvas1");
var c2 = document.getElementById("canvas2");

var ctx = c1.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 90, 0, 2 * Math.PI);
ctx.lineWidth = 2;
ctx.stroke();

animateCanvas();

function animateCanvas(){
  var w = 0;
  var timer = setInterval(function(){
    c2.width = w;
    w += 1;
        var ctx = c2.getContext("2d");
        ctx.beginPath();
        ctx.arc(100, 100, 89, 0, 2 * Math.PI);
        ctx.fillStyle = "#efba32";
        ctx.fill();
    if (w===200){clearInterval(timer)}
  }, 20);
}
.canvases{
  position: absolute;
  top: 0;
  left: 0;
}
<canvas id="canvas1" class="canvases" width="200" height="200"></canvas>
<canvas id="canvas2" class="canvases" width="200" height="200"></canvas>

How to make these shapes with javascript?

Taki
  • 17,320
  • 4
  • 26
  • 47
dev m
  • 47
  • 1
  • 9
  • You could actually do this without any JavaScript if you use SVG bezier curves to aproximate the sine wave and CSS animations to do the effect. – Patrick Roberts Sep 17 '19 at 21:24
  • Well I need it to work with custom inputs, where the filling animation takes as much time to go 100% from 0% based on what the sunrise and sunset inputs are, where the length of the day is calculated and then the animation takes that input(how long the day is) and then moves with that speed. – dev m Sep 17 '19 at 21:27

0 Answers0