skycons.js 基於canvas的天氣動態圖標小插件

skycons是什么

skycons.js是一個開源的javascript天氣動畫圖標渲染器。（特點就是動態的圖標，敲黑板）

• skycons CDN地址：https://www.bootcdn.cn/skycons/
  
• 本文參考：https://www.javascriptcn.com/read-35411.html

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:

SkyCONS是由HTML5畫布標簽、JavaScript程序生成的十幾個動畫天氣字形集。它們很容易使用，而且非常輕。

使用方法：

<canvas id="icon1" width="128" height="128"></canvas>
<canvas id="icon2" width="128" height="128"></canvas>

<script src="vendor/skycons/skycons.min.js"></script>
<script>
// 1、創建skycons實例
var skycons = new Skycons({
  "color": "#0099ff",
  "resizeClear": true // 在Android上，需要添加一個討厭的hack： {"resizeClear": true}
});

// 2、使用實例創建圖標
// 2.1、可以直接使用id值添加圖標
//      skycons.add(id,iconName)
skycons.add("icon1", Skycons.PARTLY_CLOUDY_DAY);

// 2.2、也可以把canvas的DOM傳進去
//      skycons.add(DOM,iconName)
skycons.add(document.getElementById("icon2"), Skycons.DAY_SUNNY);

// 3、play開始動畫
skycons.play();

// 3.1、pause暫停動畫（所有動畫）
skycons.pause();

// 3.2、set改變圖標
skycons.set("icon1", Skycons.PARTLY_CLOUDY_NIGHT);

// 3.3、移除動畫
// skycons.remove("icon2");

</script>

所有天氣圖標：

<p>CLEAR_DAY 晴日</p>
<canvas id="CLEAR_DAY" height="60" width="60"></canvas>
<p>CLEAR_NIGHT 晴月</p>
<canvas id="CLEAR_NIGHT" height="60" width="60"></canvas>
<p>PARTLY_CLOUDY_DAY 多雲日</p>
<canvas id="PARTLY_CLOUDY_DAY" height="60" width="60"></canvas>
<p>PARTLY_CLOUDY_NIGHT 多雲月</p>
<canvas id="PARTLY_CLOUDY_NIGHT" height="60" width="60"></canvas>
<p>CLOUDY 多雲</p>
<canvas id="CLOUDY" height="60" width="60"></canvas>
<p>RAIN 下雨</p>
<canvas id="RAIN" height="60" width="60"></canvas>
<p>SLEET 雨夾雪或雹</p>
<canvas id="SLEET" height="60" width="60"></canvas>
<p>SNOW 下雪</p>
<canvas id="SNOW" height="60" width="60"></canvas>
<p>WIND 風</p>
<canvas id="WIND" height="60" width="60"></canvas>
<p>FOG 霧</p>
<canvas id="FOG" height="60" width="60"></canvas>

JS：(省略實例的創建)

// 所有圖標類型
// iconName
skycons.add("CLEAR_DAY", Skycons.CLEAR_DAY); // 晴日
skycons.add("CLEAR_NIGHT", Skycons.CLEAR_NIGHT); // 晴月
skycons.add("PARTLY_CLOUDY_DAY", Skycons.PARTLY_CLOUDY_DAY); // 多雲日
skycons.add("PARTLY_CLOUDY_NIGHT", Skycons.PARTLY_CLOUDY_NIGHT); // 多雲月
skycons.add("CLOUDY", Skycons.CLOUDY); // 多雲
skycons.add("RAIN", Skycons.RAIN); // 下雨
skycons.add("SLEET", Skycons.SLEET); // 雨夾雪或雹
skycons.add("SNOW", Skycons.SNOW); // 下雪
skycons.add("WIND", Skycons.WIND); // 風
skycons.add("FOG", Skycons.FOG); // 霧

// 你也可以使用[短橫桿+小寫字母]的寫法來寫圖標名稱
// 例如: skycons.add("PARTLY_CLOUDY_NIGHT", "partly-cloudy-day");

效果如下：

具體應用示范圖：