时间戳

首页 > 解决方案 > 克服 HTML5 画布限制无法移动以前绘制的项目的最佳方法是什么？

javascript - 克服 HTML5 画布限制无法移动以前绘制的项目的最佳方法是什么？

问题描述

我正在尝试使用来自七个气象站的数据创建流线型风图。我试图拥有相同类型的地图是这个动画或这个动画。

我在网上读过文章，说它是如何工作的。下面引用它。

通常，浏览器中的这种可视化依赖于 Canvas 2D API，大致如下所示：

  1. 在屏幕上生成一组随机粒子位置并绘制粒子。
  2. 对于每个粒子，查询风数据以获取粒子在其当前位置的速度，并进行相应的移动。
  3. 将一小部分粒子重置到随机位置。这样可以确保风吹走的区域永远不会完全变空。
  4. 稍微淡化当前屏幕并在顶部绘制新定位的粒子。

资源

我正在努力实现这一目标，但我不明白动画是如何做到以下...

  1. 在画布上移动点（因为您无法移动以前绘制的项目。）
  2. 调整了之前绘制的点的不透明度，使它们消失。

那么，他们是怎么做到的呢？非常感谢这位新手程序员的任何建议。

谢谢你。

标签： javascripthtml5-canvasdrawmove

解决方案

经过大量广泛的研究，我找到了一种方法来实现我正在寻找的东西。

  1. 因为我正在创建一条尾巴会消失的线，所以我能够使用此代码。
ctx.beginPath();
ctx.fillStyle = 'rgba(255, 255, 255, 0.25)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.closePath();

这会在画布上绘制一个不透明层，并允许线条缩短。

  1. 关于点，因为我正在画一条线，所以我可以用图像中的像素替换点。

推荐阅读