Canvas createRadialGradient

Question

Siema,

Bawie się trochę canvasem i mam pewien problem. Otóż prawa strona mojego gradientu wygląda elegancko ale za to lewa się kisi (tylko jeden kolor), Tutaj jest kod gradientu:
 

var createGrad = function(x, y) {
  // x = pozycja x myszki
  // y = pozycja y myszki
  // windowW = szerokość okna
  // windowH = wysokość okna
  var grad = cx.createRadialGradient(x, y, 0, 0, y + windowH, x + windowW);
  grad.addColorStop(0, '#E40303');
  grad.addColorStop(.1667, '#FF8C00');
  grad.addColorStop(.3334, '#FFED00');
  grad.addColorStop(.5, '#008026');
  grad.addColorStop(.6667, '#004DFF');
  grad.addColorStop(.8334, '#750787');
  return grad;
};

Nie wiem czy zrozumiale napisałem. Chodzi o to żeby gradient wyglądał tak samo fajnie jak się przesunie myszkę całkiem na prawo (jak myszka jest całkiem z lewej to wygląda dobrze).

Może banalne pytanie ale nie ogarniam do końca tych gradientów jeszcze. moje podejrzenie jest takie, że 3-ci i 4-ty parametr funkcji createRadialGradient musi się zmieniać dynamicznie ale nie wiem w jaki sposób.

Demo:
http://codepen.io/nefil1m/pen/PwMwLX

Z góry dziękuję za poświęcony czas

Answer 1

Jak dasz

var x = e pageX+120;
var y = e.pageY-100;

To naprawi sterowanie ;p Ale co z tymgradientem zrobic to nie wiem, bo on i tak sie powieksza od lewej do prawej.

Bo jest y + windowH i x + windowH to tylko rozciaga gradient w wybranym kierunku, wiec w prawo rozciaga te zolte a w lewo te niebieskie, tak mi sie zdaje.

Comments

A co jest nie tak ze sterowaniem? U mnie działa ok, chyba, że czegoś nie widzę.

Swoją drogą dopiero teraz zobaczyłem jak to działa na Ubuntu. Jednym słowem: masakra.

---

No u mnie kursor nie lapal srodka 'gradientu' tylko byl gdzies z boku i przesówanie bylo przez to ograniczone ;)

---

Ok, dzięki. Zbadam temat.

---

Myslalem nad tym i nie wiem jak mozna by uzyskac ten efekt, bo prawa strona jest normalna a lewa jest zawsze rozciagana. Moze trzeba by to zmienić...

---

Wpadł mi do głowy taki pomysł, żeby zrobić więcej gradient stopów. Zacząć z kolorami od fioletowego i skończyć na fioletowym (tak żeby wszystkie oprócz środkowego były 2 razy) i wtedy przesunąć środek gradientu. Chyba powinno się udać ale sprawdzę po robocie.

---

http://codepen.io/nefil1m/pen/PwMwLX/

Trochę poprawiłem i już chyba wiem w czym jest problem ale jeszcze nie potrafię tego rozwiązać do końca.

---

A co zmieniles, bo teraz nie bardzo mam jak analizowac kod.

---

Tą linjkę:
 

var grad = cx.createRadialGradient(x, y, 0, y + windowH, x + windowW, windowW * 3);

wcześniej było:
 

var grad = cx.createRadialGradient(x, y, 0, 0, y + windowH, x + windowW);