有什么方法可以在javascript中将径向渐变变成椭圆形？

Question

所以目前我正在开展一个小项目，使用高度：宽度比为1：2的钻石呈现等距瓷砖空间。

我计划在它们上方制作一个“盾牌”效果，基本上将越来越多的蓝色靠近边缘，内圈是透明的，以给出半透明球体在其上方的错觉。

要做到这一点，我使用径向渐变。

目前我的画布在渲染时看起来像这样：

我的代码看起来像这样：

var gradient = ctx.createRadialGradient(450, tileheight * 5 / 2, 100, 450, tileheight * 5 / 2, 200);
gradient.addColorStop(0, "rgba(0, 0, 55, 0.5)");
gradient.addColorStop(1, "rgba(10, 10, 55, 0.8)");
drawdiamond(gradient, 450, 0, tilewidth * 5, tileheight * 5);

drawdiamond是绘制图块的函数，此函数将使用变量“gradient”指定的渐变绘制地图大小的菱形。

tilewidth和tileheight是每个tile最长部分的宽度和高度，分别为100和50.

如果你看一下图像，就会有一个问题，因为我画的瓷砖比它们更高更宽，我需要绘制一个椭圆，其高度是宽度的一半，以便效果令人信服。

有ctx.setPattern，我可以制作一个具有我想要的渐变的图像，但如果我想在运行时使地图更大，我需要为每个尺寸创建多个图像，这是不理想的。

有没有办法转换图像渐变，以便绘制椭圆而不是圆？

（对不起，如果已经发布）。

Answer 1

Matt发表了一篇文章，建议制作一个比它应该高度大的形状，他们使用ctx.transform将高度缩放设置为0.5，这将使用它来缩放渐变，因为它是它的一部分是什么画的。

我玩了它并想出了这个，谢谢你的帮助！

var gradient = ctx.createRadialGradient(450, tilewidth * mapsize / 2, 100, 450, tilewidth * mapsize / 2, 200);
gradient.addColorStop(0, "rgba(0, 0, 55, 0.5)");
gradient.addColorStop(1, "rgba(10, 10, 55, 0.8)");
ctx.setTransform(1, 0, 0, 0.5, 0, 0);
drawdiamond(gradient, 450, 0, tilewidth * mapsize, tilewidth * mapsize);
ctx.setTransform(1, 0, 0, 1, 0, 0);

此功能在两倍于预期高度的情况下绘制具有屏蔽效果的钻石，然后在绘制时将其缩小，从而产生缩放的渐变。

地图大小是长度和高度方面的切片中的地图长度。

这适用于任何尺寸的地图。