更改画布渐变对象的属性

时间:2010-07-01 17:48:44

标签: javascript html5 canvas 2d gradient

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;

}

我正在尝试为羽毛环扩展设置动画。 这段代码非常低效,因为我使用构造函数将每个循环更改为单个属性。如何更改作为参数传递给构造函数的单个属性?

1 个答案:

答案 0 :(得分:1)

来自Canvas规格......

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

...之前它说的是关于fillStyle和strokeStyle ......

  

获取时,如果值是颜色,   然后是颜色的序列化   必须退回。否则,如果是的话   不是颜色,而是CanvasGradient或   CanvasPattern,然后各自   必须返回对象。 (这样的对象   是不透明的,因此只是有用的   用于分配其他属性或   与其他渐变或   图案。)

最后,内省渐变只会显示addColorStop函数。

所以我认为构造函数是唯一可以设置这些值的地方;但你确定构造函数真的在减速吗?如果你的动画很慢,也许就是别的了。你有时间吗?