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填充您的箭頭路徑。

• 對白色指示線使用漸變也可以使用漸變來顯示白色指示條。要做到這一點，繪製您的箭頭，然後透過另一個漸變透明的地方，除了你想要的指標百分比，它將是白色的所有地方都是透明的。

  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)重置變換矩陣將每個變換重置爲默認值來撤銷變換。

把你的代碼放到一個​​動畫循環，改變角度和/或梯度，以滿足您的設計需求。

Answer 2

您可以將兩個PNG文件，一個帶箭頭，一個帶有條紋，並控制位於箭頭頂部的白色條紋的位置。 Canvas默認情況下很容易啓用，如果使用庫，則更加如此。