Изменить свойства градиентного объекта холста - PullRequest
Новая
       28

Изменить свойства градиентного объекта холста

3 голосов
/ 01 июля 2010 
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 Ответ

1 голос
/ 02 июля 2010

Из спецификации Canvas ... 

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

... а раньше говорилось о fillStyle и strokeStyle ...

При получении, если значением является цвет, затем сериализация цвета должен быть возвращен. В противном случае, если это не цвет, а CanvasGradient или CanvasPattern, то соответствующий объект должен быть возвращен. (Такие объекты непрозрачны и поэтому только полезны для присвоения другим атрибутам или для сравнения с другими градиентами или узоры.)

Наконец, при анализе градиента просто выявляется функция addColorStop.

Так что я думаю, что конструктор - это единственное место, где можно установить эти значения; но вы уверены, что конструктор действительно замедляет его? Если ваша анимация медленная, возможно, это что-то еще. Вы рассчитали это?

...