Javascript：测量图像效果

我正在用melonJS做一个2d游戏

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

初始箭头为浅红色，如示例图像顶部所示。当我一直点击按钮时，箭头颜色应该从底部变为顶部，以一条白线作为当前位置

---

如何使用javascript实现这一点？melonJS中有什么东西可以处理这种把戏吗？

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

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

既然你的问题是基于文本而不是基于代码的，我也会这么做

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

• 使用

  context.clearRect

  清除画布

• 旋转：平移到要围绕其旋转的所需中心轴坐标。然后旋转到你想要的角度。转换（

  context.translate

  &

  context.rotate

  ）实际上会旋转画布本身。这样，所有新图形都将被平移（移动）和旋转。注意：现有像素将不受影响

• 绘制箭头：使用路径命令绘制箭头（

  beginPath

  ，

  moveTo

  ，

  lineTo

  ，…针对每个箭头）。因为已经完成了变换（平移和旋转），所以不需要尝试旋转箭头图形

• 箭头渐变填充：创建延伸到箭头图形的线性渐变（

  context.createLinearGradient

  ）。设置颜色停止（

  context.addColorstop

  ）沿箭头创建所需的黄色和红色渐变。使用渐变作为

  上下文.fillStyle

  并用

  上下文.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

动画循环中，并更改角度和/或渐变以满足设计需要

既然你的问题是基于文本而不是基于代码的，我也会这么做

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

• 使用

  context.clearRect

  清除画布

• 旋转：平移到要围绕其旋转的所需中心轴坐标。然后旋转到你想要的角度。转换（

  context.translate

  &

  context.rotate

  ）实际上会旋转画布本身。这样，所有新图形都将被平移（移动）和旋转。注意：现有像素将不受影响

• 绘制箭头：使用路径命令绘制箭头（

  beginPath

  ，

  moveTo

  ，

  lineTo

  ，…针对每个箭头）。因为已经完成了变换（平移和旋转），所以不需要尝试旋转箭头图形

• 箭头渐变填充：创建延伸到箭头图形的线性渐变（

  context.createLinearGradient

  ）。设置颜色停止（

  context.addColorstop

  ）沿箭头创建所需的黄色和红色渐变。使用渐变作为

  上下文.fillStyle

  并用

  上下文.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

动画循环中，并更改角度和/或渐变以满足设计需要

只是关于重置变换的一个注意事项，在处理旋转时，我认为人们应该更喜欢setTransform方式而不是负变换，因为舍入问题。@kaido。是的，假设新的转换没有进行任何转换，那么

上下文。setTransformation（1,0,0,1,0,0,0）

更好。只是关于重置转换的注意事项，在处理旋转时，我认为人们应该更喜欢setTransform而不是负转换，因为舍入问题。@kaido。是的，假设新的transforma没有进行任何转换