Canvas制作天气预报走势图

zoukankan html css js c++ java

Canvas制作天气预报走势图

要实现的效果如下图：
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="common.css"/>
</head>
<body>
    <div class="weather-container">
        <canvas id="myCanvas" width="640" height="150"></canvas>
        <a class="oneDayWeather pastDay" href="http://www.sinohuaxia.cn" target="_blank">
            <div class="weekDay">周二</div>
            <div class="curWeather">阵雨</div>
            <div class="curWeatherPic"></div>
            <div class="highTempNum" id="highTempNum0">32°</div>
            <div class="highTemp" id="highTemp0"></div>
            <div class="lowTemp" id="lowTemp0"></div>
            <div class="lowTempNum" id="lowTempNum0">20°</div>
            <div class="dayWeatherPic"></div>
            <div class="dayWeather">雷阵雨</div>
            <div class="dayDate">06/09</div>
        </a>
        <a class="oneDayWeather pastDay" href="http://www.sinohuaxia.cn" target="_blank">
            <div class="weekDay">周二</div>
            <div class="curWeather">阵雨</div>
            <div class="curWeatherPic"></div>
            <div class="highTempNum" id="highTempNum1">29°</div>
            <div class="highTemp" id="highTemp1"></div>
            <div class="lowTemp" id="lowTemp1"></div>
            <div class="lowTempNum" id="lowTempNum1">24°</div>
            <div class="dayWeatherPic"></div>
            <div class="dayWeather">雷阵雨</div>
            <div class="dayDate">06/09</div>
        </a>
        <a class="oneDayWeather" href="http://www.sinohuaxia.cn" target="_blank">
            <div class="weekDay">周二</div>
            <div class="curWeather">阵雨</div>
            <div class="curWeatherPic"></div>
            <div class="highTempNum" id="highTempNum2">32°</div>
            <div class="highTemp" id="highTemp2"></div>
            <div class="lowTemp" id="lowTemp2"></div>
            <div class="lowTempNum" id="lowTempNum2">22°</div>
            <div class="dayWeatherPic"></div>
            <div class="dayWeather">雷阵雨</div>
            <div class="dayDate">06/09</div>
        </a>
        <a class="oneDayWeather" href="http://www.sinohuaxia.cn" target="_blank">
            <div class="weekDay">周二</div>
            <div class="curWeather">阵雨</div>
            <div class="curWeatherPic"></div>
            <div class="highTempNum" id="highTempNum3">28°</div>
            <div class="highTemp" id="highTemp3"></div>
            <div class="lowTemp" id="lowTemp3"></div>
            <div class="lowTempNum" id="lowTempNum3">9°</div>
            <div class="dayWeatherPic"></div>
            <div class="dayWeather">雷阵雨</div>
            <div class="dayDate">06/09</div>
        </a>
        <a class="oneDayWeather" href="http://www.sinohuaxia.cn" target="_blank">
            <div class="weekDay">周二</div>
            <div class="curWeather">阵雨</div>
            <div class="curWeatherPic"></div>
            <div class="highTempNum" id="highTempNum4">31°</div>
            <div class="highTemp" id="highTemp4"></div>
            <div class="lowTemp" id="lowTemp4"></div>
            <div class="lowTempNum" id="lowTempNum4">20°</div>
            <div class="dayWeatherPic"></div>
            <div class="dayWeather">雷阵雨</div>
            <div class="dayDate">06/09</div>
        </a>
        <a class="oneDayWeather" href="http://www.sinohuaxia.cn" target="_blank">
            <div class="weekDay">周二</div>
            <div class="curWeather">阵雨</div>
            <div class="curWeatherPic"></div>
            <div class="highTempNum" id="highTempNum5">28°</div>
            <div class="highTemp" id="highTemp5"></div>
            <div class="lowTemp" id="lowTemp5"></div>
            <div class="lowTempNum" id="lowTempNum5">12°</div>
            <div class="dayWeatherPic"></div>
            <div class="dayWeather">雷阵雨</div>
            <div class="dayDate">06/09</div>
        </a>
    </div>

    <script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
    var canvasTop=canvas.offsetTop;
    var ctx=canvas.getContext('2d');
    var sixdayHighTemperature=[32,29,32,28,31,28];
    var sixdayLowTemperature=[20,24,22,9,20,12];
    var picHeight=150;
    var maxHighTemp=maxNum(sixdayHighTemperature);
    var minLowTemp=minNum(sixdayLowTemperature);
    var maxRange=maxHighTemp-minLowTemp;
    function maxNum(arr){
        var maxNum=0;
        if(arr.length){
            for(var i=0,len=arr.length;i<len;i++){
                if(i==0){
                    maxNum=arr[0];
                }else if(maxNum<arr[i]){
                    maxNum=arr[i];
                }
            }
        }
        return maxNum;
    }
    function minNum(arr){
        var minNum=0;
        if(arr.length){
            for(var i=0,len=arr.length;i<len;i++){
                if(i==0){
                    minNum=arr[0];
                }else if(minNum>arr[i]){
                    minNum=arr[i];
                }
            }
        }
        return minNum;
    }
    ctx.strokeStyle="#fff";
    ctx.lineWidth=2;
    (function drawHighTemp(temps){
            var drawX=0,drawY=0;
            var distance=Math.floor(picHeight/maxRange);
            for(var i=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);
        (function drawHighTemp(temps){
            var drawX=0,drawY=0;
            var distance=Math.floor(picHeight/maxRange);
            for(var i=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:1px solid rgba(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) center 0 no-repeat;
    background-size:contain;
}
.highTemp,.lowTemp{
    position: absolute;
    left:0;
    top:-240px;
    width:100%;
    height:10px;
    background: url(img/splash_indicator_focused.png) center 0 no-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) center 0 no-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;
}

查看全文

相关阅读:
两款开发辅助工具介绍
 探究Repository模式的两种写法与疑惑
 js 时间处理
 Jquery元素追加和删除
 js 格式验证总结
 jquery UI datepicker时间控件的使用
 jquery 实现点击按钮后倒计时效果，多用于实现发送手机验证码、邮箱验证码
 JS 字符串编码函数（解决URL特殊字符传递问题）：escape()、encodeURI()、encodeURIComponent()区别详解
 form表单和ajax表单提交（Html.BeginForm()、Ajax.BeginForm()）的差别
 了解了这些才能开始发挥jQuery的威力(转)

原文地址：https://www.cnblogs.com/dzlishen/p/4570078.html