0
캔버스에 문자열을 기반으로하는 gif 아이콘을 표시하는 페이지가 있습니다. 예 : "맑은 날". api에서 해당 문자열을 가져올 수 있습니다. 내 질문은 내 캔버스의 ID를 해당 문자열을 포함하는 변수 "아이콘"할당하는 방법입니다. 물론 나는 이것을 초보자로서하는 더 좋은 방법이 있습니다.캔버스에서 ID를 변경하는 방법
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Animated weather icons</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<figure class="icons">
<canvas class="weatherIcon" width="64" height="64"></canvas>
</figure>
<script src="https://rawgithub.com/darkskyapp/skycons/master/skycons.js"></script>
<script>
$(document).ready(function weather(){
$.getJSON("https://api.darksky.net/forecast/[key]/59.868098,%2017.678976?lang=sv&callback=?",
function(json) {
var weatherJSON = json.currently;
var icon=weatherJSON.icon;
var icons = new Skycons({"color": "white"});
icons.set("clear-day", Skycons.CLEAR_DAY);
icons.set("clear-night", Skycons.CLEAR_NIGHT);
icons.set("partly-cloudy-day", Skycons.PARTLY_CLOUDY_DAY);
icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
icons.set("cloudy", Skycons.CLOUDY);
icons.set("rain", Skycons.RAIN);
icons.set("sleet", Skycons.SLEET);
icons.set("snow", Skycons.SNOW);
icons.set("wind", Skycons.WIND);
icons.set("fog", Skycons.FOG);
var iconWeather = document.getElementsByClassName("weatherIcon");
iconWeather.id = icon;
icons.play();
});
});
</script>
</body>
</html>
원하는 것을 명확히해야합니다. 그 문자열을 포함하는 변수 "icon"을 내 캔버스의 id에 할당하십시오. "캔버스 요소의'id'를 객체의 속성 인 icon.id로 설정 하시겠습니까? 또는'canvas.id'를 객체'icon'에 설정합니까? ('id'는 문자열 만 가질 수 없다) 아니면 다른 것인가? – Blindman67