Weather App 만들기) Geolocation API 적용하기

HTML & CSS & JAVASCRIPT 2021. 1. 26. 00:39

자바스크립트 날씨앱 만들기 ☀️

https://www.youtube.com/watch?v=wPElVpR1rwA&t=449s

영상에서 보여주는 API가 사이트가 막히는 바람에 😭

걱정했는데, 역시 댓글 요정님들.

대체안을 올려주셨다!

날씨정보관련 API는 여기서 대체할 수 있다.

https://openweathermap.org

Сurrent weather and forecast - OpenWeatherMap

Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on global and local weather models, satellites, radars and vast network of weather stations. how to obtain APIs (subscriptions with di

openweathermap.org

하지만 또다른 댓글 요정님이 API를 그대로 댓글로 남겨주셔서 그걸로 그냥 복사- 붙여넣기로 더 빠르게 했다!

아이콘은 여기서 참고해서 적용하면 된다.(사용법도)

https://darkskyapp.github.io/skycons/

Skycons

Skycons Skycons is a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag. They’re easy to use, and pretty lightweight, so they shouldn’t rain on your parade: var skycons = new Skycons({"color": "pink"});

darkskyapp.github.io

1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Weather</title>
</head>
<body>
    <div class="location">
        <h1 class="location-timezone">TimeZone</h1>
        <canvas class="icon" width="128" height="128"></canvas>
    </div>
    <div class="temperature">
        <div class="degree-section">
        <h2 class="temperature-degree">34</h2>
        <span>F</span>
    </div>
        <div class="temperature-description">It's too cold</div>
        
    </div>


    <!-- 날씨 아이콘 js와 우리가 사용할 js를 입력한다. -->
    <script src="skycons.js"></script>
    <script src = "app.js"></script>
</body>
</html>

2. styles.css

* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(#84fab0,#8fd3f4);
    font-family: sans-serif;
    color: white;
}

.location , .temperature{
    height: 30vh;
    width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.temperature {
    flex-direction: column;

}

.degree-section {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.degree-section span{
    margin: 10px;
    font-size: 30px;

}

.degree-section h2{
    font-size: 40px;
}

3. app.js

window.addEventListener('load', ()=>{
    let long;
    let lat;
    let temperatureDescription = document.querySelector('.temperature-description');
    let temperatureDegree = document.querySelector('.temperature-degree');
    let locationTimezone = document.querySelector('.location-timezone');
    let temperatureSection = document.querySelector(".temperature");
    const temperatureSpan = document.querySelector('.temperature span');


    // 위치 허용할때 위치 접근해서 
    if(navigator.geolocation){ 
        navigator.geolocation.getCurrentPosition(position => {
            long = position.coords.longitude;
            lat = position.coords.latitude;

            // api이용한다. 
            const proxy = 'https://cors-anywhere.herokuapp.com/';
            const api = `${proxy}https://api.darksky.net/forecast/fd9d9c6418c23d94745b836767721ad1/${lat},${long}`;

            // api fetch후에 정보 받는다. 
            fetch(api)
            .then(response =>{
                return response.json();
            })
            .then(data =>{
                // currently에서 정보를 뽑아오는데, 매번 data.currently.~의 식이아닌 {temperature}와 같은 식으로 쓸 수 있도록 설정한다.   
                // data.currently.temperature; 
                console.log(data);
                const {temperature, summary, icon}= data.currently;
                // Set DOM Elements from the API
                temperatureDegree.textContent = temperature;
                temperatureDescription.textContent = summary;
                locationTimezone.textContent = data.timezone;
                // FORMULA FOR CELSIUS
                let celsius = (temperature - 32)  * (5 / 9);

                // Set Icon
                setIcons(icon, document.querySelector('.icon'));

                // 도씨로 온도 바뀌도록 하기. 화씨<->도씨
                // Change temperature to Celsius/Farenheit
                temperatureSection.addEventListener('click', () =>{
                    if(temperatureSpan.textContent ==="F"){
                        temperatureSpan.textContent = "C";
                        temperatureDegree.textContent = Math.floor(celsius);
                    }else{
                        temperatureSpan.textContent = "F";
                        temperatureDegree.textContent = temperature;

                    }
                })


            });
        });
    } 

    // API의 icon을 따다가 아이콘을 입력하도록 한다. 
    function setIcons(icon,iconID){
        const skycons = new Skycons({color :"white"});
        // 이름을 얻고 대문자로 바꾼다. 
        const currentIcon = icon.replace(/-/g, "_").toUpperCase();
        // 실행한다.
        skycons.play();
        return skycons.set(iconID, Skycons[currentIcon]);
    }
});

4. skycons.js (아이콘 적용 js, 홈페이지 github주소에서 받을 수 있다)

(function(global) {
    "use strict";
  
    /* Set up a RequestAnimationFrame shim so we can animate efficiently FOR
     * GREAT JUSTICE. */
    var requestInterval, cancelInterval;
  
    (function() {
      var raf = global.requestAnimationFrame       ||
                global.webkitRequestAnimationFrame ||
                global.mozRequestAnimationFrame    ||
                global.oRequestAnimationFrame      ||
                global.msRequestAnimationFrame     ,
          caf = global.cancelAnimationFrame        ||
                global.webkitCancelAnimationFrame  ||
                global.mozCancelAnimationFrame     ||
                global.oCancelAnimationFrame       ||
                global.msCancelAnimationFrame      ;
  
      if(raf && caf) {
        requestInterval = function(fn) {
          var handle = {value: null};
  
          function loop() {
            handle.value = raf(loop);
            fn();
          }
  
          loop();
          return handle;
        };
  
        cancelInterval = function(handle) {
          caf(handle.value);
        };
      }
  
      else {
        requestInterval = setInterval;
        cancelInterval = clearInterval;
      }
    }());
  
    /* Catmull-rom spline stuffs. */
    /*
    function upsample(n, spline) {
      var polyline = [],
          len = spline.length,
          bx  = spline[0],
          by  = spline[1],
          cx  = spline[2],
          cy  = spline[3],
          dx  = spline[4],
          dy  = spline[5],
          i, j, ax, ay, px, qx, rx, sx, py, qy, ry, sy, t;
      for(i = 6; i !== spline.length; i += 2) {
        ax = bx;
        bx = cx;
        cx = dx;
        dx = spline[i    ];
        px = -0.5 * ax + 1.5 * bx - 1.5 * cx + 0.5 * dx;
        qx =        ax - 2.5 * bx + 2.0 * cx - 0.5 * dx;
        rx = -0.5 * ax            + 0.5 * cx           ;
        sx =                   bx                      ;
        ay = by;
        by = cy;
        cy = dy;
        dy = spline[i + 1];
        py = -0.5 * ay + 1.5 * by - 1.5 * cy + 0.5 * dy;
        qy =        ay - 2.5 * by + 2.0 * cy - 0.5 * dy;
        ry = -0.5 * ay            + 0.5 * cy           ;
        sy =                   by                      ;
        for(j = 0; j !== n; ++j) {
          t = j / n;
          polyline.push(
            ((px * t + qx) * t + rx) * t + sx,
            ((py * t + qy) * t + ry) * t + sy
          );
        }
      }
      polyline.push(
        px + qx + rx + sx,
        py + qy + ry + sy
      );
      return polyline;
    }
    function downsample(n, polyline) {
      var len = 0,
          i, dx, dy;
      for(i = 2; i !== polyline.length; i += 2) {
        dx = polyline[i    ] - polyline[i - 2];
        dy = polyline[i + 1] - polyline[i - 1];
        len += Math.sqrt(dx * dx + dy * dy);
      }
      len /= n;
      var small = [],
          target = len,
          min = 0,
          max, t;
      small.push(polyline[0], polyline[1]);
      for(i = 2; i !== polyline.length; i += 2) {
        dx = polyline[i    ] - polyline[i - 2];
        dy = polyline[i + 1] - polyline[i - 1];
        max = min + Math.sqrt(dx * dx + dy * dy);
        if(max > target) {
          t = (target - min) / (max - min);
          small.push(
            polyline[i - 2] + dx * t,
            polyline[i - 1] + dy * t
          );
          target += len;
        }
        min = max;
      }
      small.push(polyline[polyline.length - 2], polyline[polyline.length - 1]);
      return small;
    }
    */
  
    /* Define skycon things. */
    /* FIXME: I'm *really really* sorry that this code is so gross. Really, I am.
     * I'll try to clean it up eventually! Promise! */
    var KEYFRAME = 500,
        STROKE = 0.08,
        TAU = 2.0 * Math.PI,
        TWO_OVER_SQRT_2 = 2.0 / Math.sqrt(2);
  
    function circle(ctx, x, y, r) {
      ctx.beginPath();
      ctx.arc(x, y, r, 0, TAU, false);
      ctx.fill();
    }
  
    function line(ctx, ax, ay, bx, by) {
      ctx.beginPath();
      ctx.moveTo(ax, ay);
      ctx.lineTo(bx, by);
      ctx.stroke();
    }
  
    function puff(ctx, t, cx, cy, rx, ry, rmin, rmax) {
      var c = Math.cos(t * TAU),
          s = Math.sin(t * TAU);
  
      rmax -= rmin;
  
      circle(
        ctx,
        cx - s * rx,
        cy + c * ry + rmax * 0.5,
        rmin + (1 - c * 0.5) * rmax
      );
    }
  
    function puffs(ctx, t, cx, cy, rx, ry, rmin, rmax) {
      var i;
  
      for(i = 5; i--; )
        puff(ctx, t + i / 5, cx, cy, rx, ry, rmin, rmax);
    }
  
    function cloud(ctx, t, cx, cy, cw, s, color) {
      t /= 30000;
  
      var a = cw * 0.21,
          b = cw * 0.12,
          c = cw * 0.24,
          d = cw * 0.28;
  
      ctx.fillStyle = color;
      puffs(ctx, t, cx, cy, a, b, c, d);
  
      ctx.globalCompositeOperation = 'destination-out';
      puffs(ctx, t, cx, cy, a, b, c - s, d - s);
      ctx.globalCompositeOperation = 'source-over';
    }
  
    function sun(ctx, t, cx, cy, cw, s, color) {
      t /= 120000;
  
      var a = cw * 0.25 - s * 0.5,
          b = cw * 0.32 + s * 0.5,
          c = cw * 0.50 - s * 0.5,
          i, p, cos, sin;
  
      ctx.strokeStyle = color;
      ctx.lineWidth = s;
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
  
      ctx.beginPath();
      ctx.arc(cx, cy, a, 0, TAU, false);
      ctx.stroke();
  
      for(i = 8; i--; ) {
        p = (t + i / 8) * TAU;
        cos = Math.cos(p);
        sin = Math.sin(p);
        line(ctx, cx + cos * b, cy + sin * b, cx + cos * c, cy + sin * c);
      }
    }
  
    function moon(ctx, t, cx, cy, cw, s, color) {
      t /= 15000;
  
      var a = cw * 0.29 - s * 0.5,
          b = cw * 0.05,
          c = Math.cos(t * TAU),
          p = c * TAU / -16;
  
      ctx.strokeStyle = color;
      ctx.lineWidth = s;
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
  
      cx += c * b;
  
      ctx.beginPath();
      ctx.arc(cx, cy, a, p + TAU / 8, p + TAU * 7 / 8, false);
      ctx.arc(cx + Math.cos(p) * a * TWO_OVER_SQRT_2, cy + Math.sin(p) * a * TWO_OVER_SQRT_2, a, p + TAU * 5 / 8, p + TAU * 3 / 8, true);
      ctx.closePath();
      ctx.stroke();
    }
  
    function rain(ctx, t, cx, cy, cw, s, color) {
      t /= 1350;
  
      var a = cw * 0.16,
          b = TAU * 11 / 12,
          c = TAU *  7 / 12,
          i, p, x, y;
  
      ctx.fillStyle = color;
  
      for(i = 4; i--; ) {
        p = (t + i / 4) % 1;
        x = cx + ((i - 1.5) / 1.5) * (i === 1 || i === 2 ? -1 : 1) * a;
        y = cy + p * p * cw;
        ctx.beginPath();
        ctx.moveTo(x, y - s * 1.5);
        ctx.arc(x, y, s * 0.75, b, c, false);
        ctx.fill();
      }
    }
  
    function sleet(ctx, t, cx, cy, cw, s, color) {
      t /= 750;
  
      var a = cw * 0.1875,
          i, p, x, y;
  
      ctx.strokeStyle = color;
      ctx.lineWidth = s * 0.5;
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
  
      for(i = 4; i--; ) {
        p = (t + i / 4) % 1;
        x = Math.floor(cx + ((i - 1.5) / 1.5) * (i === 1 || i === 2 ? -1 : 1) * a) + 0.5;
        y = cy + p * cw;
        line(ctx, x, y - s * 1.5, x, y + s * 1.5);
      }
    }
  
    function snow(ctx, t, cx, cy, cw, s, color) {
      t /= 3000;
  
      var a  = cw * 0.16,
          b  = s * 0.75,
          u  = t * TAU * 0.7,
          ux = Math.cos(u) * b,
          uy = Math.sin(u) * b,
          v  = u + TAU / 3,
          vx = Math.cos(v) * b,
          vy = Math.sin(v) * b,
          w  = u + TAU * 2 / 3,
          wx = Math.cos(w) * b,
          wy = Math.sin(w) * b,
          i, p, x, y;
  
      ctx.strokeStyle = color;
      ctx.lineWidth = s * 0.5;
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
  
      for(i = 4; i--; ) {
        p = (t + i / 4) % 1;
        x = cx + Math.sin((p + i / 4) * TAU) * a;
        y = cy + p * cw;
  
        line(ctx, x - ux, y - uy, x + ux, y + uy);
        line(ctx, x - vx, y - vy, x + vx, y + vy);
        line(ctx, x - wx, y - wy, x + wx, y + wy);
      }
    }
  
    function fogbank(ctx, t, cx, cy, cw, s, color) {
      t /= 30000;
  
      var a = cw * 0.21,
          b = cw * 0.06,
          c = cw * 0.21,
          d = cw * 0.28;
  
      ctx.fillStyle = color;
      puffs(ctx, t, cx, cy, a, b, c, d);
  
      ctx.globalCompositeOperation = 'destination-out';
      puffs(ctx, t, cx, cy, a, b, c - s, d - s);
      ctx.globalCompositeOperation = 'source-over';
    }
  
    /*
    var WIND_PATHS = [
          downsample(63, upsample(8, [
            -1.00, -0.28,
            -0.75, -0.18,
            -0.50,  0.12,
            -0.20,  0.12,
            -0.04, -0.04,
            -0.07, -0.18,
            -0.19, -0.18,
            -0.23, -0.05,
            -0.12,  0.11,
             0.02,  0.16,
             0.20,  0.15,
             0.50,  0.07,
             0.75,  0.18,
             1.00,  0.28
          ])),
          downsample(31, upsample(16, [
            -1.00, -0.10,
            -0.75,  0.00,
            -0.50,  0.10,
            -0.25,  0.14,
             0.00,  0.10,
             0.25,  0.00,
             0.50, -0.10,
             0.75, -0.14,
             1.00, -0.10
          ]))
        ];
    */
  
    var WIND_PATHS = [
          [
            -0.7500, -0.1800, -0.7219, -0.1527, -0.6971, -0.1225,
            -0.6739, -0.0910, -0.6516, -0.0588, -0.6298, -0.0262,
            -0.6083,  0.0065, -0.5868,  0.0396, -0.5643,  0.0731,
            -0.5372,  0.1041, -0.5033,  0.1259, -0.4662,  0.1406,
            -0.4275,  0.1493, -0.3881,  0.1530, -0.3487,  0.1526,
            -0.3095,  0.1488, -0.2708,  0.1421, -0.2319,  0.1342,
            -0.1943,  0.1217, -0.1600,  0.1025, -0.1290,  0.0785,
            -0.1012,  0.0509, -0.0764,  0.0206, -0.0547, -0.0120,
            -0.0378, -0.0472, -0.0324, -0.0857, -0.0389, -0.1241,
            -0.0546, -0.1599, -0.0814, -0.1876, -0.1193, -0.1964,
            -0.1582, -0.1935, -0.1931, -0.1769, -0.2157, -0.1453,
            -0.2290, -0.1085, -0.2327, -0.0697, -0.2240, -0.0317,
            -0.2064,  0.0033, -0.1853,  0.0362, -0.1613,  0.0672,
            -0.1350,  0.0961, -0.1051,  0.1213, -0.0706,  0.1397,
            -0.0332,  0.1512,  0.0053,  0.1580,  0.0442,  0.1624,
             0.0833,  0.1636,  0.1224,  0.1615,  0.1613,  0.1565,
             0.1999,  0.1500,  0.2378,  0.1402,  0.2749,  0.1279,
             0.3118,  0.1147,  0.3487,  0.1015,  0.3858,  0.0892,
             0.4236,  0.0787,  0.4621,  0.0715,  0.5012,  0.0702,
             0.5398,  0.0766,  0.5768,  0.0890,  0.6123,  0.1055,
             0.6466,  0.1244,  0.6805,  0.1440,  0.7147,  0.1630,
             0.7500,  0.1800
          ],
          [
            -0.7500,  0.0000, -0.7033,  0.0195, -0.6569,  0.0399,
            -0.6104,  0.0600, -0.5634,  0.0789, -0.5155,  0.0954,
            -0.4667,  0.1089, -0.4174,  0.1206, -0.3676,  0.1299,
            -0.3174,  0.1365, -0.2669,  0.1398, -0.2162,  0.1391,
            -0.1658,  0.1347, -0.1157,  0.1271, -0.0661,  0.1169,
            -0.0170,  0.1046,  0.0316,  0.0903,  0.0791,  0.0728,
             0.1259,  0.0534,  0.1723,  0.0331,  0.2188,  0.0129,
             0.2656, -0.0064,  0.3122, -0.0263,  0.3586, -0.0466,
             0.4052, -0.0665,  0.4525, -0.0847,  0.5007, -0.1002,
             0.5497, -0.1130,  0.5991, -0.1240,  0.6491, -0.1325,
             0.6994, -0.1380,  0.7500, -0.1400
          ]
        ],
        WIND_OFFSETS = [
          {start: 0.36, end: 0.11},
          {start: 0.56, end: 0.16}
        ];
  
    function leaf(ctx, t, x, y, cw, s, color) {
      var a = cw / 8,
          b = a / 3,
          c = 2 * b,
          d = (t % 1) * TAU,
          e = Math.cos(d),
          f = Math.sin(d);
  
      ctx.fillStyle = color;
      ctx.strokeStyle = color;
      ctx.lineWidth = s;
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
  
      ctx.beginPath();
      ctx.arc(x        , y        , a, d          , d + Math.PI, false);
      ctx.arc(x - b * e, y - b * f, c, d + Math.PI, d          , false);
      ctx.arc(x + c * e, y + c * f, b, d + Math.PI, d          , true );
      ctx.globalCompositeOperation = 'destination-out';
      ctx.fill();
      ctx.globalCompositeOperation = 'source-over';
      ctx.stroke();
    }
  
    function swoosh(ctx, t, cx, cy, cw, s, index, total, color) {
      t /= 2500;
  
      var path = WIND_PATHS[index],
          a = (t + index - WIND_OFFSETS[index].start) % total,
          c = (t + index - WIND_OFFSETS[index].end  ) % total,
          e = (t + index                            ) % total,
          b, d, f, i;
  
      ctx.strokeStyle = color;
      ctx.lineWidth = s;
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
  
      if(a < 1) {
        ctx.beginPath();
  
        a *= path.length / 2 - 1;
        b  = Math.floor(a);
        a -= b;
        b *= 2;
        b += 2;
  
        ctx.moveTo(
          cx + (path[b - 2] * (1 - a) + path[b    ] * a) * cw,
          cy + (path[b - 1] * (1 - a) + path[b + 1] * a) * cw
        );
  
        if(c < 1) {
          c *= path.length / 2 - 1;
          d  = Math.floor(c);
          c -= d;
          d *= 2;
          d += 2;
  
          for(i = b; i !== d; i += 2)
            ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);
  
          ctx.lineTo(
            cx + (path[d - 2] * (1 - c) + path[d    ] * c) * cw,
            cy + (path[d - 1] * (1 - c) + path[d + 1] * c) * cw
          );
        }
  
        else
          for(i = b; i !== path.length; i += 2)
            ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);
  
        ctx.stroke();
      }
  
      else if(c < 1) {
        ctx.beginPath();
  
        c *= path.length / 2 - 1;
        d  = Math.floor(c);
        c -= d;
        d *= 2;
        d += 2;
  
        ctx.moveTo(cx + path[0] * cw, cy + path[1] * cw);
  
        for(i = 2; i !== d; i += 2)
          ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);
  
        ctx.lineTo(
          cx + (path[d - 2] * (1 - c) + path[d    ] * c) * cw,
          cy + (path[d - 1] * (1 - c) + path[d + 1] * c) * cw
        );
  
        ctx.stroke();
      }
  
      if(e < 1) {
        e *= path.length / 2 - 1;
        f  = Math.floor(e);
        e -= f;
        f *= 2;
        f += 2;
  
        leaf(
          ctx,
          t,
          cx + (path[f - 2] * (1 - e) + path[f    ] * e) * cw,
          cy + (path[f - 1] * (1 - e) + path[f + 1] * e) * cw,
          cw,
          s,
          color
        );
      }
    }
  
    var Skycons = function(opts) {
          this.list        = [];
          this.interval    = null;
          this.color       = opts && opts.color ? opts.color : "black";
          this.resizeClear = !!(opts && opts.resizeClear);
        };
  
    Skycons.CLEAR_DAY = function(ctx, t, color) {
      var w = ctx.canvas.width,
          h = ctx.canvas.height,
          s = Math.min(w, h);
  
      sun(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
    };
  
    Skycons.CLEAR_NIGHT = function(ctx, t, color) {
      var w = ctx.canvas.width,
          h = ctx.canvas.height,
          s = Math.min(w, h);
  
      moon(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
    };
  
    Skycons.PARTLY_CLOUDY_DAY = function(ctx, t, color) {
      var w = ctx.canvas.width,
          h = ctx.canvas.height,
          s = Math.min(w, h);
  
      sun(ctx, t, w * 0.625, h * 0.375, s * 0.75, s * STROKE, color);
      cloud(ctx, t, w * 0.375, h * 0.625, s * 0.75, s * STROKE, color);
    };
  
    Skycons.PARTLY_CLOUDY_NIGHT = function(ctx, t, color) {
      var w = ctx.canvas.width,
          h = ctx.canvas.height,
          s = Math.min(w, h);
  
      moon(ctx, t, w * 0.667, h * 0.375, s * 0.75, s * STROKE, color);
      cloud(ctx, t, w * 0.375, h * 0.625, s * 0.75, s * STROKE, color);
    };
  
    Skycons.CLOUDY = function(ctx, t, color) {
      var w = ctx.canvas.width,
          h = ctx.canvas.height,
          s = Math.min(w, h);
  
      cloud(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
    };
  
    Skycons.RAIN = function(ctx, t, color) {
      var w = ctx.canvas.width,
          h = ctx.canvas.height,
          s = Math.min(w, h);
  
      rain(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
      cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
    };
  
    Skycons.SLEET = function(ctx, t, color) {
      var w = ctx.canvas.width,
          h = ctx.canvas.height,
          s = Math.min(w, h);
  
      sleet(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
      cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
    };
  
    Skycons.SNOW = function(ctx, t, color) {
      var w = ctx.canvas.width,
          h = ctx.canvas.height,
          s = Math.min(w, h);
  
      snow(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
      cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
    };
  
    Skycons.WIND = function(ctx, t, color) {
      var w = ctx.canvas.width,
          h = ctx.canvas.height,
          s = Math.min(w, h);
  
      swoosh(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, 0, 2, color);
      swoosh(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, 1, 2, color);
    };
  
    Skycons.FOG = function(ctx, t, color) {
      var w = ctx.canvas.width,
          h = ctx.canvas.height,
          s = Math.min(w, h),
          k = s * STROKE;
  
      fogbank(ctx, t, w * 0.5, h * 0.32, s * 0.75, k, color);
  
      t /= 5000;
  
      var a = Math.cos((t       ) * TAU) * s * 0.02,
          b = Math.cos((t + 0.25) * TAU) * s * 0.02,
          c = Math.cos((t + 0.50) * TAU) * s * 0.02,
          d = Math.cos((t + 0.75) * TAU) * s * 0.02,
          n = h * 0.936,
          e = Math.floor(n - k * 0.5) + 0.5,
          f = Math.floor(n - k * 2.5) + 0.5;
  
      ctx.strokeStyle = color;
      ctx.lineWidth = k;
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
  
      line(ctx, a + w * 0.2 + k * 0.5, e, b + w * 0.8 - k * 0.5, e);
      line(ctx, c + w * 0.2 + k * 0.5, f, d + w * 0.8 - k * 0.5, f);
    };
  
    Skycons.prototype = {
      _determineDrawingFunction: function(draw) {
        if(typeof draw === "string")
          draw = Skycons[draw.toUpperCase().replace(/-/g, "_")] || null;
  
        return draw;
      },
      add: function(el, draw) {
        var obj;
  
        if(typeof el === "string")
          el = document.getElementById(el);
  
        // Does nothing if canvas name doesn't exists
        if(el === null || el === undefined)
          return;
  
        draw = this._determineDrawingFunction(draw);
  
        // Does nothing if the draw function isn't actually a function
        if(typeof draw !== "function")
          return;
  
        obj = {
          element: el,
          context: el.getContext("2d"),
          drawing: draw
        };
  
        this.list.push(obj);
        this.draw(obj, KEYFRAME);
      },
      set: function(el, draw) {
        var i;
  
        if(typeof el === "string")
          el = document.getElementById(el);
  
        for(i = this.list.length; i--; )
          if(this.list[i].element === el) {
            this.list[i].drawing = this._determineDrawingFunction(draw);
            this.draw(this.list[i], KEYFRAME);
            return;
          }
  
        this.add(el, draw);
      },
      remove: function(el) {
        var i;
  
        if(typeof el === "string")
          el = document.getElementById(el);
  
        for(i = this.list.length; i--; )
          if(this.list[i].element === el) {
            this.list.splice(i, 1);
            return;
          }
      },
      draw: function(obj, time) {
        var canvas = obj.context.canvas;
  
        if(this.resizeClear)
          canvas.width = canvas.width;
  
        else
          obj.context.clearRect(0, 0, canvas.width, canvas.height);
  
        obj.drawing(obj.context, time, this.color);
      },
      play: function() {
        var self = this;
  
        this.pause();
        this.interval = requestInterval(function() {
          var now = Date.now(),
              i;
  
          for(i = self.list.length; i--; )
            self.draw(self.list[i], now);
        }, 1000 / 60);
      },
      pause: function() {
        if(this.interval) {
          cancelInterval(this.interval);
          this.interval = null;
        }
      }
    };
  
    global.Skycons = Skycons;
  }(this));

사진으로 보면,

'HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

Number타입의 Input에서 증감 정도를 조절하고 싶을 때 (0)	2021.10.26
Number타입 Input 에서 화살표 모양을 삭제하고 싶을 때 (0)	2021.10.26
Rock-Paper-Scissors 만들기) 2. Javascript 완성하기 (0)	2021.01.24
Rock-Paper-Scissors 만들기) 1. HTML, CSS 완성하기 (0)	2021.01.24
Calculator 만들기) 3. Javascript 완성하기 (0)	2021.01.22

ABOUT ME

합니다, 개발공부📝 합니다, 개발공부📝

'HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바