更改画布渐变对象的属性

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;

}

我正在尝试制作一个羽毛状的循环动画，但是这段代码效率不高，因为我在每个循环中都使用构造函数来改变单个属性。我应该如何通过构造函数传递参数来改变单个属性呢？

- Teddy

Answer 1

从Canvas规范中...

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

...之前提到了fillStyle和strokeStyle...

获取时，如果值是颜色，则必须返回颜色的序列化。否则，如果它不是颜色而是CanvasGradient或CanvasPattern，则必须返回相应的对象。（这些对象是不透明的，因此仅对于分配给其他属性或与其他渐变或图案进行比较有用。）

最后，检查渐变只会显示addColorStop函数。

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

- Trochoid