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");

效果如下：

具体应用示范图：