Question

我正在尝试制作线性颜色渐变＆＃34;移动＆＃34;通过在.2和.8。

的值之间更改中间colorStop的偏移量

在代码中，中间颜色会向右移动一点但然后停止，有时会出现颜色错误。我也有循环胶印的价值，它保持在可接受的值内，但中间颜色不会来回移动。

这里的代码与我正在做的事情相关：

SetColorGradient: function() {
        TextGradient.addColorStop(0,"red");
        TextGradient.addColorStop(this.GradChangeOffset,"white");
        TextGradient.addColorStop(.8,"blue");
    },
    Update: function(modifier) {
        this.GradChangeOffset = this.GradChangeOffset + (this.GradChangeSpeed * modifier);
        //GRADIENT DEBUGGERS
        context.strokeText(this.GradChangeOffset.toFixed(2),canvas.width/2,canvas.height/2);
        //GRADIENT DEBUGGERS
        if (this.GradChangeOffset > .7 || this.GradChangeOffset < .2) {this.GradChangeSpeed = -(this.GradChangeSpeed);}
    },

运行Text.SetColorGradient，然后Text.DrawText实际填充单词，然后运行Text.Update更改GradOffset。这些方法每次迭代运行一次。

我假设我的问题出现在.SetColorGradient中，因为我的GradOffset在我想要的值内来回切换。

Answer 1

您无法从CanvasGradient中删除颜色停止。

这意味着在第一个循环之后，您无法以任何方式更改渐变。它将与简单的红色相同：0 +白色：0.2 +白色：0.8 +蓝色：1。

要做你想做的事，你需要在每次迭代时创建一个新的渐变：

＆＃13;

const ctx = c.getContext('2d');
let offset = 0.2;
let speed = .01;

function updateGrad(){
  offset = offset + speed;
  if (offset > .7 || offset < .2) {
    speed = -speed;
  }
  // you need to create a new gradient
  const grad = ctx.createLinearGradient(0, 0, c.width, 0);
  grad.addColorStop(0,"red");         
  grad.addColorStop(offset,"white");
  grad.addColorStop(.8,"blue");
  ctx.fillStyle = grad;
}
function draw(){
  updateGrad();
  ctx.fillRect(0,0,c.width,c.height);
  requestAnimationFrame(draw);
}
draw();

＆＃13;

<canvas id="c"></canvas>

＆＃13;

为什么这个线性颜色渐变不移动？尝试在颜色停止的位置设置渐变效果

1 个答案: