HTML Canvas Градієнти
Canvas - Градієнти
Градієнти можна використовувати для заповнення прямокутників, кіл, ліній, тексту тощо. Фігури на полотні (в Canvas) не обмежуються суцільними кольорами.
Існує два різних типи градієнтів:
- createLinearGradient(x,y,x1,y1) - створює лінійний градієнт
- createRadialGradient(x,y,r,x1,y1,r1) - створює радіальний/круговий градієнт
Коли у нас є градієнтний об’єкт, ми повинні додати дві або більше кольорових ділянок.
Метод addColorStop() визначає колірні точки та їх положення вздовж градієнта. Позиції градієнта можуть бути будь-якими від 0 до 1.
Щоб використовувати градієнт, установіть для властивості fillStyle або strokeStyle градієнт, а потім намалюйте форму (прямокутник, текст або лінію).
Використання createLinearGradient()
Приклад
Створити лінійний градієнт. Заливка прямокутника градієнтом:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Створити градієнт
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Заливка градієнтом
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Спробуйте самі »
Використання createRadialGradient():
Приклад
Створити радіальний/круговий градієнт. Залийте прямокутник градієнтом:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Створити градієнт
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Заливка градієнтом
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Спробуйте самі »
