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

【问题标题】：Any way to make a radial gradient into an oval in javascript?有什么方法可以在javascript中将径向渐变变成椭圆？
【发布时间】：2016-02-18 15:24:46
【问题描述】：

所以目前我正在做一个小项目，该项目使用高度：宽度比为 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 我可以在其中制作具有我想要的渐变的图像，但如果我想在运行时使地图更大，我需要为每种尺寸创建多个图像，这并不理想。

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

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

【问题讨论】：

这是一个我以前从未想过的好问题。 This article 建议您必须更改变换比例才能实现它
您是否尝试过使用gradientUnits 和gradientTransform 属性来挤压辐射？
@neuhaus 这个问题是关于 canvas2d，而不是 svg

标签： javascript canvas gradient

【解决方案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);

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

地图大小是地图长度和高度两侧的瓦片长度。

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

【讨论】：