2个回答
展开全部
代码如下：
<!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>
运行截图：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
使用canvas
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
