更改画布渐变对象的属性

发布于 2024-09-07 12:00:00 字数 708 浏览 7 评论 0原文

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;

}

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

原文

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;

}

I'm trying to animate a feathered loop expanding.
This code is pretty inefficient, because I'm using the constructor to change as single property each loop. How can I change a single property that is passed as a parameter to the constructor?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

多像笑话 2024-09-14 12:00:01

从 Canvas 规范...

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

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

获取时，如果该值是颜色，
然后是颜色的序列化
必须归还。否则的话，如果是
不是颜色而是 CanvasGradient 或
CanvasPattern，然后分别
必须返回对象。（此类物体
是不透明的，因此仅有用
用于分配给其他属性或
用于与其他梯度进行比较或
模式。）

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

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

From the Canvas specs...

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

...and earlier it says about fillStyle and 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.)

Lastly, introspecting a gradient just reveals the addColorStop function.

So I think the constructor is the only place those values can be set; but are you sure the constructor is really slowing it down? If your animation is slow maybe it's something else. Have you timed it?

回复收藏 0 原文

~没有更多了~