求助：如何为指定构造的游戏组件添加线性渐变？Canvas消失问题

首先肯定可以给组件加线性渐变，不需要额外加参数也能实现——只要让color参数同时支持普通颜色字符串和Canvas Gradient对象就行。你遇到Canvas消失的问题，大概率是创建渐变的方式不对，或者组件渲染逻辑没处理好渐变的情况。

下面是具体的调整步骤：

1. 调整组件的渲染逻辑 #

先确保组件的update方法能正确处理两种类型的color：

function component(width, height, color, x, y, type) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.color = color;
  this.type = type;

  this.update = function() {
    const ctx = myGameArea.context;
    // 不管是纯色字符串还是渐变对象，直接赋值给fillStyle就行
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

2. 正确创建线性渐变对象 #

关键是要用游戏Canvas的上下文来创建渐变，而不是随便新建一个上下文。比如在初始化组件前，先创建渐变：

function startGame() {
  myGameArea.start();
  // 用游戏区域的上下文创建线性渐变（参数是渐变的起点和终点坐标）
  const gradient = myGameArea.context.createLinearGradient(0, 0, 200, 0);
  gradient.addColorStop(0, "red"); // 起点颜色
  gradient.addColorStop(1, "yellow"); // 终点颜色
  // 把渐变对象作为color参数传入组件
  myGamePiece = new component(200, 100, gradient, 10, 10);
}

3. 确保游戏区域的上下文正确初始化 #

还要确认你的myGameArea对象是正确创建Canvas上下文的，比如：

const myGameArea = {
  start: function() {
    this.canvas = document.createElement("canvas");
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.frameNo = 0;
  }
}

为什么之前Canvas会消失？ #

可能的原因：

• 你创建渐变时用了错误的上下文（比如不是游戏Canvas的上下文），导致赋值给fillStyle时出错，中断了渲染；
• 渐变的坐标设置不合理，或者没有添加颜色停止点（addColorStop），导致渲染出透明的内容，看起来像Canvas消失了；
• 组件的渲染逻辑里有错误，比如把渐变对象当成字符串处理，导致语法错误，脚本中断。

如果还是有问题，可以检查浏览器控制台的报错信息，看看具体是哪里出了问题~

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