Малювання лінійних градієнтів
Canvas JavaScript create має функцію: createLinearGradient (x_ini, y_ini, x_fin і and_fin). Вона дає лінійний градієнт, використовуючи лінію, що визначається початковою точкою (x_ini, y_ini) і кінцевої (x_fin, y_fin). Напрямок цієї прямої показує рух градієнта. Наприклад, якщо потрібно, щоб градієнт йшов у вертикальному напрямку, створюють вертикальну лінію. Вона визначає перший його колір. Довжина вказує на інтенсивність градієнта. Якщо використовуються програми типу Photoshop, операція буде аналогічною. Щоб закінчити визначення градієнта, вказують кольору, які його формують, за допомогою функції: addColorStop (позиція, колір).
Параметр position визначає, з якого місця застосовується колір, зазначений другим параметром. Позиція виражається числом від нуля до одиниці. Як мінімум, два різних кольори необхідні для формування градієнта. Наприклад, якщо потрібно, щоб він починався червоним і закінчувався білим:
- addColorStop (0, «червоний»);
- addColorStop (1, «white»).
Для малювання радіальних градієнтів Canvas має функцію: createRadialGradient (x1, y1, r1, x2, y2, r2).
Вона визначає радіальний градієнт на основі двох кіл, кожна з яких з положенням його центру (x, y) і радіусом (r). Якщо центр кіл обох однаковий, то ефект буде рівномірним, тоді як в іншому випадку буде створений ефект сфери, що залежить від радіуса.
