Canvas制作天气预报走势图

2024-04-27 14:08:16

字体：大中小

来源：转载

供稿：网友

Canvas制作天气预报走势图

要实现的效果如下图：

HTML代码如下：

<!DOCTYPEhtml><html><head><title></title><linkrel="stylesheet"type="text/CSS"href="common.css"/></head><body><divclass="weather-container"><canvasid="myCanvas"width="640"height="150"></canvas><aclass="oneDayWeatherpastDay"href="http://www.sinohuaxia.cn"target="_blank"><divclass="weekDay">周二</div><divclass="curWeather">阵雨</div><divclass="curWeatherPic"></div><divclass="highTempNum"id="highTempNum0">32°</div><divclass="highTemp"id="highTemp0"></div><divclass="lowTemp"id="lowTemp0"></div><divclass="lowTempNum"id="lowTempNum0">20°</div><divclass="dayWeatherPic"></div><divclass="dayWeather">雷阵雨</div><divclass="dayDate">06/09</div></a><aclass="oneDayWeatherpastDay"href="http://www.sinohuaxia.cn"target="_blank"><divclass="weekDay">周二</div><divclass="curWeather">阵雨</div><divclass="curWeatherPic"></div><divclass="highTempNum"id="highTempNum1">29°</div><divclass="highTemp"id="highTemp1"></div><divclass="lowTemp"id="lowTemp1"></div><divclass="lowTempNum"id="lowTempNum1">24°</div><divclass="dayWeatherPic"></div><divclass="dayWeather">雷阵雨</div><divclass="dayDate">06/09</div></a><aclass="oneDayWeather"href="http://www.sinohuaxia.cn"target="_blank"><divclass="weekDay">周二</div><divclass="curWeather">阵雨</div><divclass="curWeatherPic"></div><divclass="highTempNum"id="highTempNum2">32°</div><divclass="highTemp"id="highTemp2"></div><divclass="lowTemp"id="lowTemp2"></div><divclass="lowTempNum"id="lowTempNum2">22°</div><divclass="dayWeatherPic"></div><divclass="dayWeather">雷阵雨</div><divclass="dayDate">06/09</div></a><aclass="oneDayWeather"href="http://www.sinohuaxia.cn"target="_blank"><divclass="weekDay">周二</div><divclass="curWeather">阵雨</div><divclass="curWeatherPic"></div><divclass="highTempNum"id="highTempNum3">28°</div><divclass="highTemp"id="highTemp3"></div><divclass="lowTemp"id="lowTemp3"></div><divclass="lowTempNum"id="lowTempNum3">9°</div><divclass="dayWeatherPic"></div><divclass="dayWeather">雷阵雨</div><divclass="dayDate">06/09</div></a><aclass="oneDayWeather"href="http://www.sinohuaxia.cn"target="_blank"><divclass="weekDay">周二</div><divclass="curWeather">阵雨</div><divclass="curWeatherPic"></div><divclass="highTempNum"id="highTempNum4">31°</div><divclass="highTemp"id="highTemp4"></div><divclass="lowTemp"id="lowTemp4"></div><divclass="lowTempNum"id="lowTempNum4">20°</div><divclass="dayWeatherPic"></div><divclass="dayWeather">雷阵雨</div><divclass="dayDate">06/09</div></a><aclass="oneDayWeather"href="http://www.sinohuaxia.cn"target="_blank"><divclass="weekDay">周二</div><divclass="curWeather">阵雨</div><divclass="curWeatherPic"></div><divclass="highTempNum"id="highTempNum5">28°</div><divclass="highTemp"id="highTemp5"></div><divclass="lowTemp"id="lowTemp5"></div><divclass="lowTempNum"id="lowTempNum5">12°</div><divclass="dayWeatherPic"></div><divclass="dayWeather">雷阵雨</div><divclass="dayDate">06/09</div></a></div><scripttype="text/javascript">varcanvas=document.getElementById('myCanvas');varcanvasTop=canvas.offsetTop;varctx=canvas.getContext('2d');varsixdayHighTemperature=[32,29,32,28,31,28];varsixdayLowTemperature=[20,24,22,9,20,12];varpicHeight=150;varmaxHighTemp=maxNum(sixdayHighTemperature);varminLowTemp=minNum(sixdayLowTemperature);varmaxRange=maxHighTemp-minLowTemp;functionmaxNum(arr){varmaxNum=0;if(arr.length){for(vari=0,len=arr.length;i<len;i++){if(i==0){maxNum=arr[0];}elseif(maxNum<arr[i]){maxNum=arr[i];}}}returnmaxNum;}functionminNum(arr){varminNum=0;if(arr.length){for(vari=0,len=arr.length;i<len;i++){if(i==0){minNum=arr[0];}elseif(minNum>arr[i]){minNum=arr[i];}}}returnminNum;}ctx.strokeStyle="#fff";ctx.lineWidth=2;(functiondrawHighTemp(temps){vardrawX=0,drawY=0;vardistance=Math.floor(picHeight/maxRange);for(vari=0,len=temps.length;i<len;i++){drawX=i*106+53;drawY=(maxHighTemp-temps[i])*distance;document.getElementById('highTemp'+i).style.top=(canvasTop+drawY-5)+"px";document.getElementById('highTempNum'+i).style.top=(canvasTop+drawY-25)+"px";if(i==0){ctx.moveTo(drawX,drawY);}else{ctx.lineTo(drawX,drawY);}}ctx.stroke();})(sixdayHighTemperature);(functiondrawHighTemp(temps){vardrawX=0,drawY=0;vardistance=Math.floor(picHeight/maxRange);for(vari=0,len=temps.length;i<len;i++){drawX=i*106+53;drawY=picHeight-((temps[i]-minLowTemp)*distance);document.getElementById('lowTemp'+i).style.top=(canvasTop+drawY-5)+"px";document.getElementById('lowTempNum'+i).style.top=(canvasTop+drawY+10)+"px";if(i==0){ctx.moveTo(drawX,drawY);}else{ctx.lineTo(drawX,drawY);}}ctx.stroke();})(sixdayLowTemperature)</script></body></html>

CSS代码如下：

body{background:url(img/bg_night_sunny.jpg)no-repeat;margin:0;padding:0;}.weather-container{width:640px;height:360px;position:relative;}.oneDayWeather{position:relative;overflow:hidden;width:105px;height:360px;float:left;text-align:center;line-height:20px;color:#fff;border-right:1pxsolidrgba(255,255,255,0.25);}.oneDayWeather:last-child{border:none;}.oneDayWeather:active{background:rgba(0,0,0,0.2);}.pastDay{opacity:0.6;}.weekDay{position:absolute;left:0;top:0;width:100%;}.curWeather{position:absolute;left:0;top:20px;width:100%;}.curWeatherPic{position:absolute;left:0;top:40px;width:100%;height:30px;background:url(img/w1.png)center0no-repeat;background-size:contain;}.highTemp,.lowTemp{position:absolute;left:0;top:-240px;width:100%;height:10px;background:url(img/splash_indicator_focused.png)center0no-repeat;}.highTempNum,.lowTempNum{position:absolute;left:0;top:-20em;width:100%;height:20px;text-indent:15px}.dayWeatherPic{position:absolute;left:0;bottom:40px;width:100%;height:30px;background:url(img/w2.png)center0no-repeat;background-size:contain;}.dayWeather{position:absolute;left:0;bottom:20px;width:100%;}.dayDate{position:absolute;left:0;bottom:0;width:100%;}#myCanvas{position:absolute;top:105px;left:0;}

上一篇：JavaScript对象

下一篇：EasyUI datagrid 行编辑