Javascript 平行四边形的梯度

我正在使用JavaScript在画布上绘制，用四个坐标分别从左上角、右上角、左下角和右下角绘制平行四边形，称为a、B、C和D

一些坐标的示例可能是：

A:3，3

B:4,3

C:1,0

D:2,0

我可以很好地画平行四边形，但我想用梯度来填充它。我想要从左到右填充渐变，但要匹配形状的角度。我使用的库需要渐变的开始和停止坐标。我的起点和终点在A和C之间的某个地方，终点在B和D之间的某个地方。当然，这不仅仅是因为A、B、C和D的角度不是直角。给定这些信息坐标，我如何找到A->C线上的点开始，B->D线上的点停止

---

记住，我是用JavaScript来做这件事的，所以我有一些很好的数学工具可以用来计算。

你在评论中指定的内容可以提供更多信息，例如，你需要指定垂直线的起始位置，因为这会对你的梯度产生很大影响，但我认为它不会满足你的要求

取而代之的是，以以下为例，我认为这更接近你所追求的目标：

如你所见，为了使上述平行四边形的梯度，我们忽略AC和BD边，并使梯度相对于AB和CD。你可以决定使用哪一对边，但我可能会选择长度，这样在所有平行四边形上的显示都是一致的，或者你想要相对于长边对的梯度，或者短边对的梯度，这是你的选择，但我个人会选择长边

假设你选择AB，垂直于AB的直线的斜率是AB斜率的倒数，也就是ax bx/by ay，注意这里的除以零的情况

下一步，你必须找到2个梯度点，这将是两个适当的点在任何一条线与该斜率。一个选项是拾取穿过A的线，使用A作为起点，并使用与CD相交的点作为终点，您可以将其用作计算交点的指南。否则，保持坡度，但根据您的喜好调整点，以获得所需的坡度

---

一旦你有了你的梯度点，插入他们，这是小菜一碟

形状的角度意味着什么？底线的角度？顶线？介于两者之间？我想你可以认为它需要一条与a->C线垂直的线，我需要它与a->C线相交的点作为起点，与B->D线相交的点作为终点。