Canvas制作天气预报走势图

最新推荐文章于 2021-05-28 21:28:16 发布
最新推荐文章于 2021-05-28 21:28:16 发布
阅读量369 收藏 1
点赞数
原文链接：http://www.cnblogs.com/plBlog/p/11452011.html
版权

要实现的效果如下图：

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;
}

 

转载于:https://www.cnblogs.com/plBlog/p/11452011.html

ayxh0071
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 Canvas气温折线图表 带Tooltip提示框
08-23
今天要给大家带来一款基于HTML5 Canvas的折线图表应用，它主要用来显示指定日期的气温变化趋势，当我们将鼠标滑过折线图上时，图表上即可显示一个Tooltip提示框，提示框中显示当前的天气状况及气温情况。当然这款HTML5图表也可以在其他地方使用。
canvas画天气预报
weixin_30772261的博客
04-29 240
问题一：画直线时候，画面失贞，纵坐标明明只有200大小，但是已经超出画面范围，线条也很粗： 解决：百度到类似问题：http://www.tuicool.com/articles/qMnAjm 分析：原来自己在css样式里面将这个画布canvas的尺寸设置成了页面全屏；然而html5 canvas的浏览器canvas默认大小是300px*150px；相当于一张图片css设置之后会对图片...
实现天气趋势图
一品大帅的专栏
05-01 1666
先上张效果图这种趋势图，线条更圆滑些，个人感觉比那种折线效果要好。 这个界面我是封装了一个view，代码简单，废话不多，直接上代码。WeatherTempLineView.java/** * 天气趋势折线图 * */ public class WeatherTempLineView extends View { // 用于控制曲线精细度，越大越精细 private stat
天气预报小应用之canvas实现温度走势图
王先帅的博客
11-17 3329
作者：旺仔   因为前段时间在研究H5的新属性canvas，觉得学校之后就该用一用，所以就在昨天的那个天气预报小应用的基础上对未来五天的温度进行基于canvas的数据可视化，下面是代码：用起来还是挺简单的，代码我已经做了标红处理，欢迎交流~ p,ul{margin: 0;padding: 0;} .div{ width: 50%; height: 640px;
html5 canvas 制作流程图 EaselJS
11-06
html5 canvas 制作流程图 EaselJS html5 canvas 制作流程图 EaselJS
HTML5 Canvas矩形统计图走势图特效代码
03-20
HTML5 Canvas矩形统计图走势图基于Canvas+jquery-1.7.1.min.js制作，绿色统计图，代码附带详细中文注释，方便使用。
HTML5 Canvas矩形统计图走势图
05-01
HTML5 Canvas矩形统计图走势图基于Canvas+jquery-1.7.1.min.js制作，绿色统计图，代码附带详细中文注释，方便使用。
Canvas + JavaScript 制作图片粒子效果
10-20
本文将详细介绍Canvas + JavaScript 制作图片粒子效果的方法。具有很好的参考价值，下面跟着小编一起来看下吧
H5上传图片并使用canvas制作海报.rar
07-12
h5上传图片并用canvas制作海报，上传图片然后在图片上任意位置添加文字标签进行保存
实现天气预报代码并绘制曲线
04-13
Android实现天气预报代码并绘制曲线
canvas为你的天气预报添加雨雪效果 | 微信小程序
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
01-30 531
关注前端瓶子君，回复“交流”加入我们一起学习，天天进步来源：行舟客https://yunxiaomeng.blog.csdn.net/article/details/110059776...
天气温度折线图canvas完整案例
FireflyLJW的博客
09-06 6529
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8" /&gt;     &lt;title&gt;天气温度折线图&lt;/title&gt; &lt;/head&gt; &lt;body&gt;     &lt;c
html5 canvas画云
believer123的专栏
04-08 4275
使用函数画出天空的云层图像： y 主要使用到的是数学的圆与弧度之间转换关系： 代码如下 //div对象 var parentContainer = document.getElementById("container"); (function(window) { var utils = window.utils || {}; wi
一款天气app的温度曲线图的实现
tyhzsd的专栏
01-19 8468
最近在开发一款天气app，有一个功能是显示当天24小时每三个小时的气温状况，这个功能无疑要用图表来实现最好了。所以在github上找到一个国人开发的图表库，XCL-Charts。 先上效果图： 首先创建一个SplineChartView继承自GraphicalView，再主要实现三个方法 第一个是关于图表的渲染 private void chartRender() {
web 前端绘制折线_web前端开发之路——Android 自定义控件（天气趋势折线图）
weixin_42537831的博客
02-22 276
@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);if (mElements == null || mElements.size() == 0) {return;}double max_up = getMaxUp();double min_down = getMinDown();canvas.setDrawFil...
自定义View实现天气折线图效果
qy的专栏
06-01 8415
其实在拿到设计的一个效果，我们首先要做的就是去思考，怎么实现，就算不好实现，也要实现一个折中的两边都可以妥协的方案。 由于当前是要展示10天以上的天气的情况，那么如果采用一个view绘制的形式肯定会影响到性能，那其实很快就想到了ListView，这不就是一个横向的ListView的效果么，考虑到ListView并没有横向的效果，转而就想到了RecyclerView。
javascript canvas实现墨迹天气折线图类似效果_墨迹天气小程序DAU月均环比增100%，如何实现用户增长“三级跳”？...
weixin_39980596的博客
12-06 362
今天想讲讲在小程序中如何做增长。如果把视角放到去年，你会发现很多成熟的互联网公司开始悄悄进入小程序寻求新的用户增长点。比如猫眼小程序半年时间获客破亿，连咖啡小程序1个月的用户增长超过过去一年，而猎豹小游戏也在早期迅速积累7000万用户。为什么小程序有这么大的流量潜力？一个常被提及的原因是微信的强社交属性天然适合裂变，而且还能触达到下沉市场的用户，小程序是一个难得的获客成本低洼地。游点好玩...
android 温度折线图,使用自定义View实现天气折线图效果
weixin_42461108的博客
05-28 1190
下面会详细的介绍实现的过程。1.构想思路其实在拿到设计的一个效果，我们首先要做的就是去思考，怎么实现，就算不好实现，也要实现一个折中的两边都可以妥协的方案。由于当前是要展示10天以上的天气的情况，那么如果采用一个view绘制的形式肯定会影响到性能，那其实很快就想到了ListView，这不就是一个横向的ListView的效果么，考虑到ListView并没有横向的效果，转而就想到了RecyclerVi...
号码走势图 canvas
最新发布
05-17
要绘制号码走势图，可以使用HTML5的Canvas元素。Canvas是一个用于绘制图形的HTML元素，通过JavaScript代码可以在Canvas上绘制各种图形和图表。 具体实现步骤如下： 1. 在HTML文件中创建一个Canvas元素，并设置宽度和高度。 ``` <canvas id="myCanvas" width="800" height="600"></canvas> ``` 2. 在JavaScript文件中获取Canvas元素，并创建一个用于绘制的2D上下文对象。 ``` var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ``` 3. 绘制坐标轴和刻度线。 ``` ctx.beginPath(); ctx.moveTo(50, 550); ctx.lineTo(750, 550); ctx.stroke(); ctx.beginPath(); ctx.moveTo(50, 550); ctx.lineTo(50, 50); ctx.stroke(); ctx.font = "14px Arial"; ctx.textAlign = "center"; ctx.fillText("号码", 25, 300); ctx.fillText("期数", 400, 580); for(var i=0; i<10; i++){ var x = 100 + i*60; ctx.beginPath(); ctx.moveTo(x, 550); ctx.lineTo(x, 540); ctx.stroke(); ctx.fillText(i, x, 570); } for(var i=0; i<6; i++){ var y = 550 - i*80; ctx.beginPath(); ctx.moveTo(50, y); ctx.lineTo(60, y); ctx.stroke(); ctx.fillText((i+1)*10, 25, y); } ``` 4. 绘制号码走势图。 ``` var data = [ [1, 3, 5, 7, 9], [2, 4, 6, 8, 0], [1, 4, 7, 0, 3], [2, 5, 8, 0, 6], [3, 6, 9, 0, 2] ]; for(var i=0; i<data.length; i++){ var y = 550 - (i+1)*80; for(var j=0; j<data[i].length; j++){ var x = 100 + data[i][j]*60; ctx.beginPath(); ctx.arc(x, y, 20, 0, 2*Math.PI); ctx.stroke(); } } ``` 这样就可以绘制出一个简单的号码走势图。具体的样式和数据可以根据实际需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值