如何在不改变容器的情况下缩放Canvas渐变对象？

Canvas的Gradient对象本身没有直接的缩放、旋转属性，无法直接修改已创建的渐变对象实现变换效果，但可以通过两种间接方式达成需求：

方法一：利用上下文变换创建渐变（高效推荐） #

核心思路：在创建渐变前，先对上下文应用目标变换（缩放/旋转），创建渐变后恢复上下文状态。渐变会保留创建时的上下文变换信息，后续用它填充容器时，就能呈现变换后的效果，而容器的尺寸和位置完全不受影响。

代码示例：

const ctx = document.body.appendChild(document.createElement('canvas')).getContext('2d')

// 保存当前上下文状态，避免影响后续绘制
ctx.save();

// 应用目标变换：示例为X轴缩放2倍、Y轴缩放0.5倍、旋转30度
ctx.scale(2, 0.5);
ctx.rotate((30 * Math.PI) / 180); // 角度转弧度

// 在变换后的上下文中创建渐变，坐标需反向适配变换（后续会恢复上下文）
// 原渐变中心(75,75)，X缩放2倍则坐标除以2，Y缩放0.5倍则坐标除以0.5
const gradient = ctx.createRadialGradient(75/2, 75/0.5, 10/2, 75/2, 75/0.5, 50/2);

// 恢复上下文到初始状态
ctx.restore();

// 添加渐变颜色节点
gradient.addColorStop(0, 'red')
gradient.addColorStop(1, 'green')

// 应用渐变填充样式
ctx.fillStyle = gradient

// 绘制容器，尺寸和位置保持原样
ctx.fillRect(0, 0, 150, 150)

方法二：使用离屏画布绘制变换后的渐变（更灵活） #

如果需要对已创建的渐变做二次变换，或者想更直观控制渐变呈现，可以用离屏画布先绘制变换后的渐变，再将其转为图案填充原容器。

代码示例：

const ctx = document.body.appendChild(document.createElement('canvas')).getContext('2d')

// 创建和容器尺寸一致的离屏画布
const offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = 150;
offscreenCanvas.height = 150;
const offCtx = offscreenCanvas.getContext('2d');

// 在离屏画布上应用变换
offCtx.scale(2, 0.5);
offCtx.rotate((30 * Math.PI) / 180);

// 创建渐变并填充离屏画布（填充更大区域避免变换后出现空白）
const gradient = offCtx.createRadialGradient(75, 75, 10, 75, 75, 50);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'green');
offCtx.fillStyle = gradient;
offCtx.fillRect(-75, -75, 300, 300);

// 将离屏画布转为不重复的图案，作为原画布的填充样式
const pattern = ctx.createPattern(offscreenCanvas, 'no-repeat');
ctx.fillStyle = pattern;

// 绘制原容器，尺寸和位置不变
ctx.fillRect(0, 0, 150, 150);

内容的提问来源于stack exchange，提问作者Meysam Ghorbani