如何將陰影角度和深度轉換爲HTML5畫布shadowOffset表示

Question

我需要將陰影的給定角度和深度轉換爲html5 canvas陰影偏移表示。

例如：

var angle = 90; 
var depth = 10; 

應該返回陰影偏移如下：

context.shadowOffsetX = 10; 
context.shadowOffsetY = 0; 

和if ...

var angle = 135; 
var depth = 15; 

那麼暗影補償應該是：

context.shadowOffsetX = 15; 
context.shadowOffsetY = 15; 

雖然我確信這是一個簡單的數學計算，但我真的不知道從哪裏開始。因此，我無法發佈我迄今爲止所嘗試的內容。數學真的不是我的強項。

如果有人能幫助，我會非常感激。

Answer 1

這是很簡單的：

var angleInRad = angle * 2 * Math.PI/360 ; 
context.shadowOffsetX = depth * Math.cos(angleInRad) ; 
context.shadowOffsetY = depth * Math.sin(angleInRad) ; 

你可能想使用Math.trunc上的偏移量。