2011-09-24 12 views
19

Próbuję narysować linię, która jest gradientem. Jak to możliwe na płótnie?Jak wykreślić linię gradientu w kanwie HTML?

+0

Szukasz czegoś takiego: http://diveintohtml5.org/canvas.html#gradients? –

+0

tak. Chciałem zastosować go do linii i zorientowałem się, że działa ctx.strokeStyle. – Nasir

Odpowiedz

32

Tak. Przykład:

// linear gradient from start to end of line 
var grad= ctx.createLinearGradient(50, 50, 150, 150); 
grad.addColorStop(0, "red"); 
grad.addColorStop(1, "green"); 

ctx.strokeStyle = grad; 

ctx.beginPath(); 
ctx.moveTo(50,50); 
ctx.lineTo(150,150); 

ctx.stroke(); 

zobaczyć go w akcji tutaj:

http://jsfiddle.net/9bMPD/

+0

Dziękuję bardzo. Przetworzono dobrze – Nasir

+2

Po prostu zauważ, że gradient nie podąża za okręgiem, ale jest liniowy. Nie będzie rozprowadzany równomiernie. Ulepszysz go, dzieląc krąg na kilka części i tworząc osobny gradient dla każdej części. – Viesturs

Powiązane problemy