PixiJS中修改Graphics对象颜色的最优实现方法是什么？

有比切换可见性更优的实现方案，以下按推荐优先级排序：

方案1：单Graphics实例 + tint属性（最推荐） #

Graphics实例本身支持tint着色属性，你只需要绘制1次白色填充的正方形，后续直接修改tint值即可切换颜色，不需要创建多个实例，也不需要重复绘制，内存占用和渲染效率都是最优的。
示例代码：

// 仅创建1个Graphics实例，填充色设为白色（tint基于底色叠加，白色呈现的目标色最准确）
const square = new PIXI.Graphics();
square.beginFill(0xffffff, opacity);
square.lineStyle(lineStyle);
square.drawRect(0, 0, width, height);
square.position.set(x, y);

// 初始化默认显示红色
square.tint = red;

// 需要切换颜色时直接修改tint属性即可
// 切绿色：square.tint = green
// 切蓝色：square.tint = blue

注：你原有的示例代码存在笔误，每个新创建的Graphics实例变量名和调用beginFill的变量名不匹配，实际运行会报错，单实例方案也可以避免这类重复代码导致的问题。

方案2：clear清空后重绘 #

如果你的正方形除了颜色之外，形状、边框等属性也需要动态调整，可以选择清空原有内容后重新绘制：

// 封装颜色切换方法
function changeSquareColor(targetColor) {
  square.clear();
  square.beginFill(targetColor, opacity);
  square.lineStyle(lineStyle);
  square.drawRect(0, 0, width, height);
}

// 调用示例：切换为红色
changeSquareColor(red);

该方案的缺点是每次切换都会触发Graphics的重绘逻辑，性能比tint方案差。

方案3：预生成纹理用Sprite实现 #

如果这个正方形需要在页面中批量复用，可以预先把正方形绘制为纹理，用Sprite实例实现，修改tint的性能比Graphics实例更高：

// 全局仅执行一次，预生成正方形纹理
const squareTemplate = new PIXI.Graphics();
squareTemplate.beginFill(0xffffff, opacity);
squareTemplate.lineStyle(lineStyle);
squareTemplate.drawRect(0, 0, width, height);
const squareTexture = squareTemplate.generateTexture();

// 使用时创建Sprite实例即可
const square = new PIXI.Sprite(squareTexture);
square.position.set(x, y);
// 切换颜色同样修改tint属性
square.tint = red;

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