扩展天气图标skycons.js, 将10个扩展到20个-优快云博客

本文介绍了如何扩展天气图标库Skycons，将原有的10个图标增加到20个，包括晴天、晚晴、多云、雨、雪等各种天气情况。通过引用js文件、定义canvas元素和初始化调用来实现图标显示，并展示了新增的如小雨、雷电、雨夹雪等复杂天气图标。

第一步：引用js

引用js:<script src="js/skycons.js"></script>

第二步：在HTML中定义canvas元素

第三步：初始化和调用

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

扩展后的skycons.js

(function(global){var requestInterval,cancelInterval;(function(){var raf=global.requestAnimationFrame||global.webkitRequestAnimationFrame||global.mozRequestAnimationFrame||global.oRequestAnimationFrame||global.msRequestAnimationFrame,caf=global.cancelAnimationFrame||global.webkitCancelAnimationFrame||global.mozCancelAnimationFrame||global.oCancelAnimationFrame||global.msCancelAnimationFrame;if(raf&&caf){requestInterval=function(fn){var handle={value:null};function loop(){handle.value=raf(loop);fn()}loop();return handle};cancelInterval=function(handle){caf(handle.value)}}else{requestInterval=setInterval;cancelInterval=clearInterval}}());var KEYFRAME=500,STROKE=0.06,TAU=2*Math.PI,TWO_OVER_SQRT_2=2/Math.sqrt(2);function circle(ctx,x,y,r){ctx.beginPath();ctx.arc(x,y,r,0,TAU,false);ctx.fill()}function halfcircle(ctx,x,y,r,ang1,ang2){ctx.beginPath();ctx.arc(x,y,r,ang1,ang2,false);ctx.stroke()}function line(ctx,ax,ay,bx,by){ctx.beginPath();ctx.moveTo(ax,ay);ctx.lineTo(bx,by);ctx.stroke()}function puff(ct