帆布| 如何从X轴移动对象创建Y轴轨迹

Question

我目前正在用Canvas / Phaser开发游戏，正在寻找以下问题的解决方案。

我需要从仅在X轴上移动的对象制作Y轴轨迹，以使其看起来像尘埃轨迹。

但是，在我看来，到处都是人们通过弹跳球或其他X / Y运动对象创建轨迹的，这不是我想要创建的。

我正在使用Phaser游戏框架开发游戏，如果该框架中有可以替代的解决方案，但是如果您可以通过纯画布解决方案/想法帮助我，那也将很棒！

我希望我选择了正确的词来进行解释，下面我添加了一张图片和一个小型视频，这些可视化了我想要的最终结果。

https://youtu.be/Fd7VOACEKig?t=22m32s

Answer 1

我不知道相位器，但是由于您还要求提供简单的画布示例，因此这里有一个示例：

FIFO缓冲区（数组）

您可以使用FIFO缓冲区（先进先出）或延迟缓冲区。 根据需要将x和/或y值存储到缓冲区。 当缓冲区根据预定义的最大值已满时，将丢弃第一个值。

现在您有了尾部值，现在就可以根据需要渲染它们。

演示版

在下面，我们只存储x。 为尾部定义了渐变。 这将提供最佳/平滑的结果，但是您也可以创建一个预定义的颜色与fifo缓冲区中的条目匹配的数组。

请注意，在这种情况下，您只需要渲染实体（不渲染Alpha），否则将可见每个线段之间的过渡。

基本上，这就是一切。 只要使其适合您的渲染周期即可。

性能提示：

• 如果沿y方向移动，则需要遵循渐变。 与其每次都创建一个新的渐变，不如对玩家头部使用translate（）。 这还将转换渐变线定义。
• 如果您需要长尾巴，使用类型化数组可以提高性能。 它们比列表/节点数组快，但不带移位，因此您需要使用循环指针。
• 对于视频中的游戏，只需绘制一条尾巴一次，然后将其重新用于其他头部即可。
• 与其在演示中使用阴影来发光，不如使用已经应用了发光的头部图像。

 var ctx = document.querySelector("canvas").getContext("2d"); ctx.fillStyle = "#fff"; var fifo = [], // fifo buffer to cycle older x values through max = 30, // max positions stored in the buffer i = 0, // just for demo, make x cycle on screen size = 8, // draw size x = 300, // x-pos from mousemove event y = 30, // y-pos for player head // make gradient for the tail stroke: // Adjust range as needed gradient = ctx.createLinearGradient(0, 30, 0, 280); // brightest color on top, transparent color at bottom. gradient.addColorStop(0, "#ccd"); gradient.addColorStop(1, "rgba(200,200,240,0)"); // set up canvas ctx.strokeStyle = gradient; ctx.lineWidth = 10; ctx.lineJoin = "round"; ctx.lineCap = "square"; // glow effect (because we can.. :) ) ctx.shadowColor = "rgba(255,255,255,0.5)"; ctx.shadowBlur = 20; ctx.canvas.onmousemove = function(e) { var rect = this.getBoundingClientRect(); x = e.clientX - rect.left; }; // main loop - (function loop() { // push new value(s) to fifo array (for demo, only x) fifo.push(x); // fifo buffer full? Throw out the first value if (fifo.length > max) fifo.shift(); // render what we got; ctx.clearRect(0, 0, 600, 480); ctx.beginPath(); ctx.moveTo(fifo[0], y + fifo.length * size); for(var t = 1; t < fifo.length; t++) { ctx.lineTo(fifo[t], y + (fifo.length - t) * size); } ctx.stroke(); // draw main player head ctx.translate(x, y); ctx.rotate(0.25*Math.PI); ctx.fillRect(-size*0.5, -size*0.5, size*2, size*2); ctx.setTransform(1,0,0,1,0,0); requestAnimationFrame(loop) })(); 

 canvas {background:#000} 

 <canvas width=600 height=360></canvas>