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

Question

所以目前我正在做一个小项目，该项目使用高宽比为 1:2 的菱形渲染等距图 block 空间。

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

为此，我使用径向渐变。

目前我的 Canvas 在渲染时看起来像这样:

我的代码是这样的:

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 是一个绘制方 block 的函数，该函数将使用变量“gradient”指定的梯度绘制 map 大小的菱形。

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

如果您查看图片，就会发现问题，因为我绘制的瓷砖比它们的高度更宽，所以我需要绘制一个椭圆，其中高度是宽度半径的一半，以便效果要有说服力。

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

有没有办法转换图像渐变，使其绘制椭圆而不是圆形？

(抱歉，如果这已经发布了)。

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);

此函数在其预期高度的两倍处绘制具有屏蔽效果的菱形，然后在绘制时将其缩小，从而产生缩放渐变。

map 大小是 map 在长度和高度两侧的图 block 长度。

这适用于任何大小的 map 。