javascript - 如何将阴影角度和深度转换为 HTML5 画布 shadowOffset 表示

Question

我需要将阴影的给定角度和深度转换为 html5 画布 shadowOffset 表示。

例如：

var angle = 90;
var depth = 10;

应返回阴影偏移量，如下所示：

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

而如果...

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。