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>

skycons.js 基于canvas的天气动态js插件相关推荐

skycons.js 基于canvas的天气动态图标小插件
skycons是什么 skycons.js是一个开源的javascript天气动画图标渲染器.(特点就是动态的图标,敲黑板) skycons CDN地址:https://www.bootcdn.cn/ ...
Three.js基于Canvas的文字贴图
Three.js基于Canvas的文字贴图居中对齐,对中文文字做了长度兼容处理,可根据开发需求自行构造Canvas贴图 const createLabel = () => {const nam ...
html5 canvas图表,Chart.js基于Canvas画布的HTML5统计图表库 - 资源分享
Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.可以绘制柱状图.热点图.曲线图等,使用HTML5中的Canvas画布,支持原生的和jQuery的调用方法. 特点 6种图表 ...
133行代码实现质感地形(js,基于canvas)
原文地址:http://www.playfuljs.com/realistic-terrain-in-130-lines/ 写于2014年5月5日程序员们都喜欢创造一些东西,但是,还有什么会比创建一 ...
Html5基于Canvas画一个动态时钟
文章目录前言一.前期准备二.绘制刻度 1.流程 2.效果图三.绘制文字 1.流程 2.效果图四.绘制指针 1.取得当前时间 2.绘制秒针 3.绘制分针 4.绘制时针 5.效果图五.绘制圆心 ...
原生js 基于canvas写一个简单的前端截图工具
先看效果 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
slick.js基于jQuery全屏轮播插件
下载地址基于slick.js轮播插件实现的全屏轮播效果,支持图片和文字动画显示效果. dd:
原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
基于canvas画布的星空效果
canvas是html5的新标签,其画布功能尤为强大.当然了canvas在IE10以下浏览器是不兼容的,所以呢为了特效肯定是牺牲一定的兼容性.这里呢,分享一个基于canvas开发的浩瀚星河插件,其实这 ...

skycons.js 基于canvas的天气动态js插件

skycons.js 基于canvas的天气动态js插件

20个图标示例（它们是动态的！颜色也可以自己设置！）

用法一

1.引入js CDN

2.html文件里面添加标签

3.html文件初始化并调用

用法二

skycons.js 基于canvas的天气动态js插件相关推荐

最新文章

热门文章