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

How can I convert shadow angle and depth into an HTML5 canvas shadowOffset representation

本文关键字：转换 HTML5 画布 表示 shadowOffset 深度 阴影      更新时间：2023-09-26

我需要将阴影的给定角度和深度转换为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;

虽然我确信这是一个简单的数学计算，但我真的不知道从哪里开始。因此，我无法发布我迄今为止尝试过的内容。数学真的不是我的强项。

如果有人能帮忙，我将不胜感激。

很简单：

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

您可能需要在偏移量上使用Math.trunc。

相关文章：