更改画布渐变对象的属性答案

【问题标题】：Change canvas gradient object's properties更改画布渐变对象的属性
【发布时间】：2010-07-01 17:48:44
【问题描述】：

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;

}

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

【问题讨论】：

标签： javascript html canvas 2d gradient

【解决方案1】：

来自 Canvas 规格...

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

...之前它谈到了 fillStyle 和 strokeStyle...

在获取时，如果值是颜色，然后是颜色的序列化必须退回。否则，如果是不是颜色而是 CanvasGradient 或 CanvasPattern，然后是各自的必须返回对象。（这样的物体是不透明的，因此只有有用的分配给其他属性或用于与其他渐变或模式。）

最后，内省渐变只是揭示了 addColorStop 函数。

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

【讨论】：