Как добавить эффект градиента на малую дугу холста?

Question

Я пытаюсь добавить эффект градиента маленькой дуги на холсте. Использование

context.createLinearGradient(0, 0, 400. 400);
secondGradient.addColorStop(0, 'white');
secondGradient.addColorStop(0.2, 'black');
secondGradient.addColorStop(0.8, 'black');
secondGradient.addColorStop(1, 'white');

Но не в состоянии получить ожидаемые результаты, также было бы замечательно, если бы кто-то мог объяснить, как createLinearGradient работает с кружком.

Заранее спасибо.

http://jsfiddle.net/x4tcboj3/1/.

Answer 1

Я наконец понял это. Я был немного прав насчет того, что ошибся в отношении createLinearGradient, поэтому я пошел MDN , чтобы прочитать больше о createLinearGradient Оказалось, мне пришлось установить две точки, где я хочу, чтобы эффект градиента начался.

(Глупый я, прочитайте документацию) Я пытался получить случайный результат, чтобы получить результаты. Я добавил событие onmousemove, чтобы понять точную точку, и установил const secondGradient = this.context.createLinearGradient(20, 90, 75, 230); работает как положено.

http://jsfiddle.net/x4tcboj3/4/