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

效果如下：

具体应用示范图：

转载于:https://www.cnblogs.com/mankii/p/9875804.html

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

skycons.js 基于canvas的天气动态js插件
skycons.js 基于canvas的天气动态js插件 skycons.js是一个开源的javascript天气动画图标渲染器.相当于gif动图一样. skycons CDN地址:https://w ...
Three.js基于Canvas的文字贴图
Three.js基于Canvas的文字贴图居中对齐,对中文文字做了长度兼容处理,可根据开发需求自行构造Canvas贴图 const createLabel = () => {const nam ...
php 教师批改作业代码,html5 canvas做批改作业的小插件代码示例
本篇文章小编给大家分享一下html5 canvas做批改作业的小插件代码示例,代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 需求分析能进行批改,就是相当 ...
html5 canvas图表,Chart.js基于Canvas画布的HTML5统计图表库 - 资源分享
Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.可以绘制柱状图.热点图.曲线图等,使用HTML5中的Canvas画布,支持原生的和jQuery的调用方法. 特点 6种图表 ...
Html5基于Canvas画一个动态时钟
文章目录前言一.前期准备二.绘制刻度 1.流程 2.效果图三.绘制文字 1.流程 2.效果图四.绘制指针 1.取得当前时间 2.绘制秒针 3.绘制分针 4.绘制时针 5.效果图五.绘制圆心 ...
133行代码实现质感地形(js,基于canvas)
原文地址:http://www.playfuljs.com/realistic-terrain-in-130-lines/ 写于2014年5月5日程序员们都喜欢创造一些东西,但是,还有什么会比创建一 ...
原生js 基于canvas写一个简单的前端截图工具
先看效果 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
小程序利用canvas实现波浪动态图，原生canvas的部分限制
小程序利用canvas实现波浪动态图小程序的canvas与该动态图的问题首先上效果图片下面直接上代码小程序的canvas与该动态图的问题小程序的canvas与html的canvas实现是完全 ...
基于canvas使用粒子拼出你想要的文字[2]——粒子的动画效果
写在最前本次分享一个用canvas粒子渲染文字的"完整"版实现,功能包括:随机粒子缓动动画,粒子汇聚.发散,并拼出你想要的文字.本文继续上面一节基于canvas使用粒子拼出你想要 ...

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

skycons是什么

skycons介绍、skycons使用

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

最新文章

热门文章