http://binma85.iteye.com/blog/1469516
这个链接里面有天气的接口，里面提供了一些天气的信息，你可以用ajax调用。
具体的你可以参加一下慕课网上面这个jquery mobile的列车时刻表教程。
http://www.imooc.com/learn/207
代码如下：
<!DOCTYPE HTML><html>
<head>
<meta content="text/html charset=utf-8" http-equiv="Content-Type" />
<title>天气实例</title>
</head>
<body>
<canvas id="canvas_circle" width="800"height="600">
<p>Your browserdoes not support the canvas element!</p>
</canvas>
<script type="text/javascript">
//温度转换成纵坐标
function trans(degree){
return 70+(40-degree)*10
}
//简单版绘制温度图表
function drawChart(canvasId, maxArr, minArr, dateArr, weekArr) {
var weekString = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
var pi2 = Math.PI*2
var canvas =document.getElementById(canvasId)
var c =canvas.getContext("2d")
c.font ="12px Times New Roman"
//设置背景渐变
var grd=c.createLinearGradient(0,25,0,300)
grd.addColorStop(0,"#000066")
grd.addColorStop(0.4,"#000055")
grd.addColorStop(1,"#000022")
c.fillStyle=grd
c.fillRect(25,25,410,300)
//绘制文字
c.fillStyle="#ffffff"
c.textAlign = "center"
c.fillText("昨天", 50, 50 )
c.fillText("今天", 110, 50 )
for(var i=2 i< 7 i++){
c.fillText(weekString[weekArr[i]], 50+60*i, 50 )
}
for(var i=0 i< 7 i++){
c.fillText(dateArr[i], 50+60*i, 65 )
}
//绘制最高温度
c.moveTo(50, trans(maxArr[0]))
for(var i=1 i< 7 i++){
c.lineTo(50+60*i, trans(maxArr[i]))
}
c.strokeStyle="#ff4444"
c.stroke()
//绘制最低温度
c.beginPath()
c.moveTo(50, trans(minArr[0]))
for(var i=1 i< 7 i++){
c.lineTo(50+60*i, trans(minArr[i]))
}
c.strokeStyle="#4444ff"
c.stroke()
//绘制点
c.fillStyle = "ff4444"
c.beginPath()
for(var i=0 i< 7 i++){
c.moveTo(50+60*i, trans(maxArr[i]))
c.arc(50+60*i, trans(maxArr[i]), 3, 0, pi2)
}
c.fill()
c.beginPath()
c.fillStyle = "4444ff"
for(var i=0 i< 7 i++){
c.moveTo(50+60*i, trans(minArr[i]))
c.arc(50+60*i, trans(minArr[i]), 3, 0, pi2)
}
c.fill()
}
function init() {
var maxArr = [33,37,38,35,34,29,31]//最高温度
var minArr = [19,22,23,22,23,20,21]//最低温低
var dateArr = ["5/27", "5/28", "5/29", "5/30", "5/31", "6/1", "6/2"]//日期
var weekArr = [2,3,4,5,6,0,1]//星期
drawChart("canvas_circle", maxArr, minArr, dateArr, weekArr)
}
window.onload = init
</script>
</body>
</html>
运行截图：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）