Javascript：衡量图像效果

Question

我正在使用melonJS制作2D游戏。

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

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

我怎么能用javascript做到这一点？在melonJS中是否有任何东西可以处理这种技巧？

Answer 1

由于你的问题是基于文本的而不是基于代码的，我也会这样做。

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

• 使用context.clearRect清除画布。

• 旋转：转换为您想要旋转的所需中心轴坐标。然后旋转到所需的角度。转换（context.translate＆amp; context.rotate）实际上会旋转画布本身。这样，所有新图纸都将被翻译（移动）和旋转。注意：现有像素不受影响。

• 绘制箭头：使用路径命令（beginPath，moveTo，lineTo，...为每一段绘制箭头箭头）。由于您已完成转换（平移和旋转），因此无需尝试旋转箭头图形。

• 箭头的渐变填充：创建一个延伸到箭头图形的线性渐变（context.createLinearGradient）。设置颜色停止（context.addColorstop）以创建所需的黄色和＆amp;沿着你的箭头红色渐变。将渐变用作context.fillStyle，并使用context.fill填充箭头路径。

• 使用渐变白色指示线您还可以使用渐变显示白色指示条。要执行此操作，请绘制箭头，然后使用另一个在所有位置透明的渐变透支，除了您想要的指示百分比，它将是白色。

  var g=ctx.createLinearGradient(0,170,0,0);
  g.addColorStop(pct-0.01,'transparent');
  g.addColorStop(pct-0.01,'white');
  g.addColorStop(pct+0.01,'white');
  g.addColorStop(pct+0.01,'transparent');
  ctx.fillStyle=g;
  ctx.fill();
  

• 始终清理！撤消转换。您可以通过以下方式撤消转换：（1）以相反的顺序重新发布转换命令并使用否定参数或（2）通过使用context.setTransform(1,0,0,1,0,0)重置转换矩阵将每个转换重置为默认值。

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

Answer 2

您可以将两个PNG文件分层，一个带箭头，一个带条带，并控制位于箭头顶部的白色条纹的位置。默认情况下，Canvas应该非常容易启用，如果您正在使用库，则更是如此。