skycons.js基于canvas的天⽓动态图标⼩插件
skycons是什么
skycons.js是⼀个开源的javascript天⽓动画图标渲染器。（特点就是动态的图标，敲⿊板）
skycons CDN地址：
本⽂参考：
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.ElementById("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、移除动画
/
/ ve("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>
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");
效果如下：
具体应⽤⽰范图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。