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

2023年2月9日 299次阅读

因此,目前我正在开展一个小型项目,使用高度：宽度比为1：2的钻石呈现等距瓷砖空间.

我计划通过基本上将越来越多的蓝色靠近边缘并且内圈是透明的来在它们上面制作“屏蔽”效果,以给出在其上方的半透明球体的错觉.

要做到这一点,我使用径向渐变.

目前渲染时我的画布如下所示：

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

我的代码看起来像这样：

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,我可以制作一个具有我想要的渐变的图像,但如果我想在运行时使地图更大,我需要为每个尺寸创建多个图像,这是不理想的.

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

(对不起,如果已经发布).

最佳答案 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);

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

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

地图大小是长度和高度两侧的图块中的地图长度.

这适用于任何大小的地图.

点赞