skycons.js 基于canvas的天气动态js插件
skycons.js是一个开源的javascript天气动画图标渲染器。相当于gif动图一样。
skycons CDN地址：https://www.bootcdn.cn/skycons/
20个图标示例（它们是动态的！颜色也可以自己设置！）
用法一
1.引入js CDN
<script src="https://www.bootcdn.cn/skycons/"></script>
2.html文件里面添加标签
<canvas id="icon4" width="88" height="88"></canvas>
3.html文件初始化并调用
var skycons = new Skycons({ "color": "#333", "resizeClear": true // 在Android上，需要添加一个讨厌的hack： {"resizeClear": true} }); skycons.add("icon1", Skycons.CLEAR_DAY);//晴 skycons.add("icon2", Skycons.CLEAR_NIGHT);//晚 晴 skycons.add("icon3", Skycons.PARTLY_CLOUDY_DAY);//多云见晴 skycons.add("icon4", Skycons.PARTLY_CLOUDY_NIGHT);// 晚 多云见晴 skycons.add("icon5", Skycons.CLOUDY);// 阴 skycons.add("icon6", Skycons.RAIN);//雨 skycons.add("icon7", Skycons.SLEET);//冰雹 skycons.add("icon8", Skycons.SNOW);//雪 skycons.add("icon9", Skycons.WIND);//风 skycons.add("icon10", Skycons.FOG);//雾 skycons.add("icon11", Skycons.LITTLE_RAIN);//小雨 skycons.add("icon12", Skycons.LITTLE_RAIN_SUN);//小雨转晴 skycons.add("icon13", Skycons.RAIN_SUN);//大雨转晴 skycons.add("icon14", Skycons.LIGHTING);//雷 skycons.add("icon15", Skycons.LIGHTING_RIAN);//雷阵雨 skycons.add("icon16", Skycons.RAIN_SNOW);//雨夹雪 skycons.add("icon17", Skycons.RAINSTORM);//暴雨 skycons.add("icon18", Skycons.HAIL);//冰雹 skycons.add("icon19", Skycons.SANDSTORM);//沙塵暴 skycons.add("icon20", Skycons.HAIL_RIAN);//冰雹夹雨 skycons.play();
用法二
直接通过提供的方法，用js直接添加。
<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>
