Canvas 绘制风向动画

最新推荐文章于 2024-08-07 16:44:09 发布
最新推荐文章于 2024-08-07 16:44:09 发布
阅读量1.4k 收藏 5
点赞数
文章标签： json webpack ViewUI
原文链接：https://juejin.im/post/5a44407451882566e416479a
版权
博客介绍了如何利用Canvas渲染风向动画，数据来源于NOAA的Grid格点风力数据，通过将U/V风速转化为RGB并合成为PNG。由于只获取到PNG，故只能展示正向风向。作者使用自己的动画控制器和CanvasOverLayer扩展进行渲染，项目基于ES6和webpack，提供了将Chart.js集成到地图的示例，并鼓励贡献。
摘要由CSDN通过智能技术生成

拿到一张UV风速图

其实数据是来源于NOAA 的Grid 格点风力数据，分辨率是1度，全球共360*180 个格点 （总计64,800个）. 那么就我之前的了解，风力数据一般都是分为U/V 两个方向，包括NetCDF 数据也是，坐标信息是隐含在grid 的索引中，风力记录在了 U/ V 两个垂直的方向.

把水平U 方向的风力和 垂直V 方向的风力数值分别作为 RGB波段的 R，G 两个数值，合成一张png就如图所示。

由于我没有采用官网的数据下载API，所以没有拿到原始的json 数据，只拿到一张png，所以无法反演出 U/V 数值的符号，只有正值. 所以最后渲染出来只有第一象限的风向，当然作为演示应该没问题。

根据UV 图提取出每个格点的
tmpCanvas.width = windImage.width;
    tmpCanvas.height = windImage.height;
    tmpCtx.drawImage(windImage, 0, 0);
    // imageData.data.length: width*height*4
    let imageData = tmpCtx.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height),
        dataLength = imageData.data.byteLength;
    if
最低0.47元/天 解锁文章
weixin_34128839
关注
openlayers3 + canvas 通过粒子动画展示风场
lazyMan2019的博客
12-12 3087
openlayers3 + canvas 展示风场 原理：将屏幕坐标转换为经纬度，再通过经纬度获取风速风向，再通过canvas绘制 效果： 步骤： 1、随机新建粒子（显示得风得数量，确定生命周期、位置等信息），获取该粒子得风速风向（我是使用双线性内插法）。 2、变为下一个时刻，先将上一个时刻得透明度降低（粒子生命剩余得越少，他就越透明，粒子死亡后不留痕迹），遍历粒子，根据粒子得风速风向，计算出该...
HTML5 Canvas下雨动画 可控制风向和雨水强度.rar
07-10
HTML5 CSS3下雨动画 可调整雨量、速度，HTML5 Canvas下雨动画 可控制风向和雨水强度。再越下越大，时而小雨、时而大雨，风将雨水刮偏的效果也得以呈现，而本代码却很简单的就实现了。HTML5下雨动画，敬请欣赏和学习。
canvas绘制风场效果
03-22
canvas绘制风场，部署到web容器中才能运行，nginx，apache、tomcat都可以，包含封装的风场js和样例风场数据
基于HT for Web矢量实现2D叶轮旋转
weixin_33743248的博客
07-20 267
之前在拓扑上的应用都是些静态的图元，今天我们将在拓扑上设计一个会动的图元——叶轮旋转。 我们先来看下这个叶轮模型长什么样   从模型上看，这个叶轮模型有三个叶片，每一个叶片都是不规则图形，显然无法用上我们HT for Web的基础图形来拼接，那么我们该怎么做呢？很简单，在HT for Web中提供了自定义图形的方案，我们可以通过自定义图形来绘制像叶片这种不规则图形。 在绘制叶片之前，我...
鸿蒙OS开发使用Canvas组件绘制天气曲线图
最新发布
老邓头
08-07 671
效果图： 原理 使用贝塞尔曲线 首先可以了解一下贝塞尔曲线。如果看不懂也没关系，这里会直接讲绘制曲线的步骤。首先使用beginPath方法确定起始点。这里会循环地用到bezierCurveTo（三次贝塞尔曲线）方法。该方法需要三个点的坐标，即图上的点1、2、3。这里的点3就表示温度的点。为了让曲线更平滑，我们让点1的高度与起始 鸑鷟407 HarmonyOS开发者社区。参考下文： 鸿蒙征文 | 使用Canvas组件绘制天气曲线图_harmonyos_鸑鷟407-HarmonyOS开发者社区。
canvas画小蝌蚪模拟气象风场
weixin_30556959的博客
02-03 444
预览地址：http://bl.ocks.org/chengquan223/raw/505d935f54bf0fe86195642464e77ce7/ <style type="text/css"> canvas { margin: 20px 0; } </style> <h1>小蝌蚪模拟风场</h1&...
Canvas绘制风向盘
丫丫狸笫的专栏
04-25 1730
——先画圆，再画刻度… 已知风向值，确定N、NE、E、SE、S、SW、W、NW中的一个： String direction = "Unknown"; if (degrees >= 337.5 || degrees 22.5) { direction = "N"; } else if (degrees >= 22.5 && degrees 67.5) {
canvas绘制可更改大小方向颜色的图片符号，以风场符号为例并提供图片下载功能
10-19
使用javascript和canvas绘制可更改大小方向颜色的图片符号，以风场符号为例，可以下载图片
Html5 Canvas绘制火苗鼠标跟随动画.rar
10-01
总之，"Html5 Canvas绘制火苗鼠标跟随动画"是一个展示HTML5 Canvas、CSS3和jQuery协同工作的实例。它涉及到鼠标事件处理、图形绘制、动画制作等多个前端开发的关键技术，对于提升网页交互体验和学习Web开发技巧都...
HTML5 Canvas模拟下雨动画场景
06-11
Canvas元素是整个动画的画布，通过JavaScript来操作它的上下文（`canvas.getContext('2d')`）进行绘图。 CSS（Cascading Style Sheets）文件用于定义网页的样式。在这个项目中，CSS可能包含对Canvas的样式设置，如...
【Canvas】记录一次从0到1绘制风场空间分布图的过程
~~~
12-12 4804
本文主要记录了一次自己使用canvas从0到1绘制风场空间分布图的经历，整个过程还是蛮复杂的，不过也刚好巩固了一下自己的canvas知识，将其运用到了实践中，同时也发现自己对知识的理解其实还存在许多的不足，需要继续努力！🔥如果此文对你有帮助的话，欢迎💗关注、👍、⭐✍️评论支持一下博主~
windy.js实现风场效果
08-14
windy.js实现风场效果，里面包含用到的各类js以及数据js.
利用ichartjs绘制风向风力图
04-20
NULL 博文链接：https://ichartjs.iteye.com/blog/1894314
基于HChart实现的风速风向等多种气象要素图表例子
10-26
基于HChart实现的风速风向等多种要素图表例子，保证能直接运行的例子。
echarts 绘制风向杆(风羽)
lhpxx的博客
08-25 3154
echarts 绘制风向杆，用作气象展示，专业人员要求风向杆更能清楚的看到风向风速，简单的配置echarts，实现风向杆出图。
Canvas实现龙卷风动态效果
初尘屿风的博客
05-08 1140
随着人工智能的不断发展，编程语言这门技术也越来越重要，很多人都意识到了这项技术的重要性，而交互功能更是对前端程序员的一个考验，同时也可以将项目娱乐化，为自己加薪求职做基础，本文就介绍了HTML5中Canvas的一部分知识并以《龙卷风》为案例做出系统性介绍、展示，以便大家更好的理解和掌握。
openlayers vue 实现台风
weixin_52318785的博客
09-14 2345
四,放进我们准备好的featureslist中,确保台风模块在一个矢量图层里。再汇点,汇点的方法我给封装统一了,我现在只把绘制台风点相关的代码贴出来。我把代码全部贴出来算了,基本都有注释,代码质量自己甄别。二,轨迹路线点数据放在list中。三,生成要素并设置长啥样。
风场可视化与原理剖析
热门推荐
axiwang88的专栏
03-22 1万+
最近因为项目需要，做风场可视化，也不是什么新鲜的东西了，站在前人的肩膀上鼓捣了两天也算是完成了，特此记录一下。 网上关于风场可视化的文章也挺多，可以拜读以下几位博主文章，在此表示感谢。 数据可视化之风向图（强烈安利这篇博文） 可视化之Earth NullSchool cesium实现风场效果 ......(教程很多不一一列举了) 项目中应用案例是在cesium球上进行可视化，效果图如下（...
uniapp使用canvas绘制动画
04-04
1. 创建画布 在页面中添加一个canvas标签，并设置宽高属性： ``` <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas> ``` 在JS文件中获取画布对象： ``` const ctx = uni.createCanvasContext('myCanvas'); ``` 2. 绘制动画 通过多次调用canvas的绘图方法来实现动画效果。 例如，可以绘制一个圆形，并通过改变圆心坐标和半径来实现动画效果： ``` let x = 100, y = 100, r = 50; // 初始圆心坐标和半径 function draw() { ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 清空画布 ctx.beginPath(); ctx.arc(x, y, r, 0, 2 * Math.PI); ctx.closePath(); ctx.fillStyle = '#ff0000'; ctx.fill(); x += 1; // 改变圆心坐标 r += 0.5; // 改变半径 if (x > canvasWidth + r) { // 判断动画是否结束 return; } requestAnimationFrame(draw); // 递归调用绘制函数，实现动画效果 } draw(); ``` 3. 动画优化 为了提高动画的流畅度和性能，可以采取以下优化措施： - 避免频繁操作DOM，尽量减少对页面的影响； - 使用requestAnimationFrame代替setTimeout和setInterval，提高动画的流畅度； - 避免在绘制过程中频繁调用API，可以将多次绘制操作合并成一次操作，减少API调用次数； - 避免频繁地清空画布，可以将上一次绘制的内容保留下来，只清空需要改变的部分。 例如，可以将上面的代码进行优化： ``` let x = 100, y = 100, r = 50; // 初始圆心坐标和半径 let lastX = 0, lastY = 0, lastR = 0; // 上一次绘制的圆心坐标和半径 function draw() { if (x > canvasWidth + r) { // 判断动画是否结束 return; } ctx.beginPath(); ctx.arc(x, y, r, 0, 2 * Math.PI); ctx.closePath(); ctx.fillStyle = '#ff0000'; ctx.fill(); lastX = x; // 保存当前圆心坐标和半径 lastY = y; lastR = r; x += 1; // 改变圆心坐标和半径 r += 0.5; requestAnimationFrame(() => { ctx.clearRect(lastX - lastR, lastY - lastR, lastR * 2, lastR * 2); // 只清空需要改变的部分 draw(); // 递归调用绘制函数，实现动画效果 }); } draw(); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值