Javascript :量规图像效应

Question

我正在用melonJS制作一个2d游戏。

在我的游戏中，我有一个箭头在它的轴上旋转。这个箭头是一个png图像。当我保持鼠标左键，箭头需要填充从黄色到红色，从底部到顶部。下面是一个例子：

​

​

最初的箭头都是浅红色的，就像示例图像的顶部一样。当我保持按钮点击时，箭头的颜色应该从底部改变，白线作为当前位置到顶部。

我如何使用javascript来做到这一点呢？在melonJS中有什么东西可以用来对付这种把戏吗？

Answer 1

因为您的问题是基于文本的，而不是基于代码的，所以我也会这样做。

下面是如何绘制旋转的渐变箭头

• 用context.clearRect清除画布。
• 旋转：转换成你想要旋转的中心轴坐标.然后旋转到你想要的角度。转换(context.translate & context.rotate)实际上将旋转画布本身。这样，所有新的图纸都将被翻译(移动)和旋转。注意:现有像素将不受影响。
• 绘制箭头：使用路径命令绘制箭头(beginPath、moveTo、lineTo、.对于箭头的每一段)。由于您已经完成了转换(平移和旋转)，所以不需要尝试旋转箭头图。
• 渐变填充箭头：创建一个线性渐变(context.createLinearGradient)，扩展到箭头绘图。设置颜色停止(context.addColorstop)以沿箭头创建所需的黄色和红色渐变。使用渐变作为context.fillStyle，并使用context.fill填充箭头路径。
• 使用渐变表示白色指示行，您也可以使用渐变显示白色指示条。要做到这一点，请绘制箭头，然后用另一种渐变透支，该渐变在所有地方都是透明的，除非您想要的指示百分比是白色的。 g=ctx.createLinearGradient(0,170,0,0)；g.addColorStop(pct-0.01，‘透明’)；g.addColorStop(pct-0.01，'white')；g.addColorStop(pct+0.01，'white')；g.addColorStop(pct+0.01，‘透明’)；ctx.fillStyle=g；ctx.fill()；
• 总是清理！撤销您的转换。您可以通过以下两种方法撤消转换：(1)以反向顺序并使用负参数重新发出转换命令；或(2)通过使用context.setTransform(1,0,0,1,0,0)重置转换矩阵，将每个转换重置为默认值。

将您的代码放入requestAnimationFrame动画循环，并更改角度和/或渐变以满足您的设计需要。

Answer 2

您可以在两个PNG文件层，一个用箭头，一个用条纹，并控制位于箭头顶部的白色条纹的位置。默认情况下，画布应该可以很容易地启用它，如果您使用的是库，则更容易启用它。