Javascript：衡量圖像效果

我正在使用melonJS製作2D遊戲。Javascript：衡量圖像效果

在我的遊戲中，我有一個箭頭在它的軸上旋轉。這個箭頭是一個PNG圖像。當我保持鼠標左鍵時，箭頭需要從黃色到紅色填充，從底部到頂部。下面是一個爲例：

初始箭頭是所有光紅，像例如圖像的頂部。當我點擊按鈕時，箭頭顏色應該從底部改變爲白線作爲當前位置到頂部。

我該如何用javascript做到這一點？ melonJS中是否有任何東西可以處理這種詭計？

來源

2016-03-08 user2733521

由於您的問題是基於文本而不是基於代碼的，因此我也會這樣做。

這裏是如何得出的旋轉變化梯度箭頭

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

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

來源

2016-03-08 17:46:33 markE

只是關於重置轉換的一個注意事項，在處理旋轉時，我認爲由於四捨五入問題，我們應該更喜歡setTransform方法而不是負轉換。 – Kaiido

@Kaiido。是的，假設沒有轉換正在進行到新的轉換中，那麼'context.setTransformation（1,0,0,1,0,0）'更好。 – markE

非常感謝！它就像一個魅力！ – user2733521

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

來源

2016-03-08 14:07:08

Javascript：衡量圖像效果

回答

相關問題