javascript - 更改 Canvas 渐变对象的属性

Question

var i = 0;
var x = 960;
var y = 540;
var interval = window.setInterval(render, 100);

function render()
{

gradient = cxt.createRadialGradient(x, y, i, x, y, i+10);
gradient.addColorStop(0, "rgba(0,0,0,0)");//white inside 
gradient.addColorStop(.4, "rgba(255,255,255,1)");//white inside 
gradient.addColorStop(.6, "rgba(255,255,255,1)");//white inside 
gradient.addColorStop(1, "rgba(0,0,0,0)");//fade to transparent black outside;

cxt.fillStyle= "#000000";
cxt.fillRect(0,0,WIDTH,HEIGHT);
cxt.fillStyle = gradient;
cxt.fillRect(0,0,WIDTH,HEIGHT);
cxt.fill();
cxt.drawImage(logo,0,0);
i+=5;

}

我正在尝试为羽化循环展开设置动画。这段代码效率很低，因为我使用构造函数在每个循环中将其更改为单个属性。如何更改作为参数传递给构造函数的单个属性？

Answer 1

来自 Canvas 规范...

interface CanvasGradient {
  // opaque object
  void addColorStop(in float offset, in DOMString color);
};

...和前面提到的 fillStyle 和 strokeStyle...

On getting, if the value is a color, then the serialization of the color must be returned. Otherwise, if it is not a color but a CanvasGradient or CanvasPattern, then the respective object must be returned. (Such objects are opaque and therefore only useful for assigning to other attributes or for comparison to other gradients or patterns.)

最后，反省渐变只会揭示 addColorStop 函数。

所以我认为构造函数是唯一可以设置这些值的地方；但是你确定构造函数真的在减慢它的速度吗？如果你的动画很慢，也许是别的原因。你计时了吗？