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

本文链接：https://blog.csdn.net/Loria1/article/details/86571103

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

摘要由CSDN通过智能技术生成

第一步：引用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(ctx,t,cx,cy,rx,ry,rmin,rmax){var c=Math.cos(t*TAU),s=Math.sin(t*TAU);rmax-=rmin;circle(ctx,cx-s*rx,cy+c*ry+rmax*0.5,rmin+(1-c*0.5)*rmax)}function puffs(ctx,t,cx,cy,rx,ry,rmin,rmax){var i;for(i=5;i--;){puff(ctx,t+i/5,cx,cy,rx,ry,rmin,rmax)}}function cloud(ctx,t,cx,cy,cw,s,color){t/=30000;var a=cw*0.21,b=cw*0.12,c=cw*0.24,d=cw*0.28;ctx.fillStyle=color;puffs(ctx,t,cx,cy,a,b,c,d);ctx.globalCompositeOperation="destination-out";puffs(ctx,t,cx,cy,a,b,c-s,d-s);ctx.