Холст HTML5: градиенты и узоры

Содержание
  1. Введение В холсте HTML5 вы можете заливать или обводить фигуры и текст с помощью метода stroke () или fill (). Когда мы рисуем текст или фигуры, используется текущий стиль обводки или заливки. В качестве обводки или стиля заливки можно задать цвет, узор или градиент. Градиенты Градиенты состоят из непрерывных плавных переходов цвета вдоль вектора от одного цвета к другому, возможно, сопровождаемых дополнительными переходами вдоль того же вектора к другим цветам. HTML5 Canvas (2D) поддерживает два вида градиента: линейный и радиальный. Линейный градиент: Линейный градиент определяет изменение цвета вдоль линии между двумя точками. Вы можете создать линейный градиент, вызвав метод createLinearGradient (). Вот синтаксис и параметры метода: Синтаксис: var gradient = ctx.createLinearGradient (x0, y0, x1, y1); Параметры Тип Описание x0 число Координата x (в пикселях) начальной точки градиента. y0 number Координата Y (в пикселях) начальной точки градиента. x1 number Координата x (в пикселях) конечной точки градиента. y1 number Координата Y (в пикселях) конечной точки градиента. Следующим шагом в определении градиента является добавление как минимум двух цветовых точек. Для этого используйте метод addColorStop (). Вот синтаксис и параметры метода: Синтаксис: gradient.addColorStop (offset, color); Параметры Тип Описание offset number Значение с плавающей запятой между 0,0 и 1,0, которое представляет позицию, где 0 — начало градиента, а 1 — конец .. color number Цветовая строка CSS для отображения в позиции, указанной в параметре смещения. Пример: HTML5 Canvas Линейный градиент Следующий веб-документ создает градиент: Вывод: Холст HTML5 - Пример линейного градиента var canvas = document.getElementById ("d emoCanvas "); если (холст.getContext) {var ctx = canvas.getContext ("2d"); var gradient = ctx.createLinearGradient (10, 90, 200, 90); gradient.addColorStop (0, 'черный'); gradient.addColorStop (1, 'white'); ctx.fillStyle = gradient; ctx. fillRect (10, 10, 200, 250); }

    Пример: линейный градиент холста HTML5 с использованием значения цвета RGBa ()

    Вы можете создать градиент, указав границу цвета с помощью значения цвета RGBa (), которое включает степени прозрачности. В следующем примере рисуется четыре прямоугольника, каждый с градиентом, идущим в другом направлении, от красного до 50% прозрачного синего.

    Вывод:


    Код:

          HTML5 Canvas - пример линейного градиента       var canvas = document.getElementById ("demoCanvas");  если (холст.getContext) {var ctx = canvas.getContext ("2d");  var gradient1 = ctx.createLinearGradient (0, 0, 50, 0); gradient1.addColorStop (0, 'красный'); gradient1.addColorStop (1, 'rgba (0, 0, 255, 0.5)'); ctx.fillStyle  = gradient1; ctx.fillRect (0, 0, 75, 75);  var gradient2 = ctx.createLinearGradient (0, 0, 0, 50); gradient2.addColorStop (0, 'красный'); gradient2.addColorStop (1, 'rgba (0, 0, 255, 0.5)'); ctx.fillStyle  = gradient2; ctx.fillRect (75, 0, 75, 75);  var gradient3 = ctx.createLinearGradient (150, 0, 200, 50); gradient3.addColorStop (0, 'красный'); gradient3.addColorStop (1, 'rgba (0, 0, 255, 0.5)'); ctx.fillStyle  = gradient3; ctx.fillRect (150, 0, 75, 75);  var gradient3 = ctx.createLinearGradient (275, 50, 225, 0); gradient3.addColorStop (0, 'красный'); gradient3.addColorStop (1, 'rgba (0, 0, 255, 0.5)'); ctx.fillStyle  = gradient3; ctx.fillRect (225, 0, 75, 75);  }
    
    
    Пример: HTML5 Canvas Rainbow gradient
    
    
    В следующем примере создается градиент радуги с семью цветами, каждый цвет имеет 1/6 расстояния вдоль градиента.
    
    
    Результат:
    
    
    
    
    
    Код:
     HTML5 Canvas - Радужный градиент       var canvas = document.getElementById (" demoCanvas ");  если (холст.getContext) {var ctx = canvas.getContext ("2d");  var gradient = ctx.createLinearGradient (10, 0, 500, 0); gradient.addColorStop (0, 'красный'); gradient.addColorStop (1/6, 'оранжевый'); gradient.addColorStop (2/6, 'желтый  '); gradient.addColorStop (3/6,' green '); gradient.addColorStop (4/6,' blue '); gradient.addColorStop (5/6,' indigo '); gradient.addColorStop (1,' фиолетовый  '); ctx.fillStyle = gradient; ctx. fillRect (0, 0, 500, 75);}
    
    
    Радиальный градиент:
    
    
    Радиальный градиент определяет изменение цвета вдоль конуса (трехмерной геометрической формы) между двумя кругами.  Вы можете создать радиальный градиент, вызвав метод createRadialGradient () и передав два круга, а также указав исходный и целевой радиус окружности.
    
    
    Синтаксис:
    var gradient = ctx.createRadialGradient (x0, y0, r0, x1, y1, r1)
    Параметры
    Тип
    Описание
    x0
    number
    Координата x (в пикселях) начальной окружности градиента.
    y0
    number
    Координата Y (в пикселях) начальной окружности градиента.
    rad0
    number
    Радиус начальной окружности.
    x1
    number
    Координата x (в пикселях) конечной окружности градиента.
    y1
    number
    Координата y (в пикселях) конечной окружности градиента.
    rad1
    number
    Радиус конца  круг.
    
    
    Следующим шагом будет добавление как минимум двух цветовых точек.  Для этого используйте метод addColorStop ().
    Пример -1: HTML5 Canvas Radial gradient
    
    
    Следующий веб-документ определяет радиальный градиент и использует его для заполнения круга  .
    
    
    Вывод:
    
    
    
    
    
    Код:
     Пример: HTML5 Canvas Radial  градиент example1      var canvas = document.getElementById ("demoCanvas");  если (холст.getContext) {var ctx = canvas.getContext ("2d"); var gradient = ctx.createRadialGradient (85, 88, 5, 88, 90, 69); gradient.addColorStop (0, 'белый');  gradient.addColorStop (1, 'черный'); ctx.fillStyle = gradient; ctx.arc (90, 90, 60, 0, 2 * Math.PI); ctx.fill ();  }
    
    
    Пример 2: Радиальный градиент холста HTML5
    
    
    В следующем веб-документе мы определили два разных градиента.  Поскольку мы можем контролировать начальную и конечную точки градиента, мы можем создавать более сложные эффекты.  Здесь мы немного сместили начальную точку от конечной, чтобы получить сферический 3D-эффект.
    
    
    Вывод:
    
    
    
    
    
    Код:
    Пример: HTML5 Canvas Radial gradient example2      var canvas = document.  getElementById ("demoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ("2d");//Создание градиентов var g1 = ctx.createRadialGradient (45,45,10,52,50,30);  g1.addColorStop (0, '# A7D30C'); g1.addColorStop (0.9, '# 019F62'); g1.addColorStop (1, 'rgba (1,159,98,0)'); var g2 = ctx.createRadialGradient (125  , 45,20,132,50,30); g2.addColorStop (0, '# FF5F98'); g2.addColorStop (0.75, '# FF0188'); g2.addColorStop (1, 'rgba (255,1,136,0)'  );//рисуем фигуры ctx.fillStyle = g1; ctx.fillRect (0,0,150,150); ctx.fillStyle = g2; ctx.fillRect (100,0,170,150);}
    Шаблоны
    
    
    Шаблон используется для заливки или обводки объекта с использованием предварительно определенного графического объекта, который может быть реплицирован ("мозаичен") при фиксированном  интервалы по x и y  для покрытия окрашиваемых участков.  Шаблон состоит из источника изображения - такого как JPG, GIF, PNG, SVG или текущий воспроизводимый кадр видео - и настройки повторения для создания шаблона из фрагментов изображения.
    
    
    Вы создаете шаблон, используя метод контекста createPattern (), передавая объект изображения и параметр «repeat».
    
    
    Синтаксис:
    var pattern = ctx.createPattern (изображение, повторение);
    Параметры
    Тип
    Описание
    image
    Объект
    Изображение, холст или видеоэлемент используемого шаблона.
    повтор
    number
    Направление повторения.  Строка «repeat» повторяет изображение как по горизонтали, так и по вертикали, но вы можете указать одно из следующих значений - 
     repeat: шаблон повторяется как в горизонтальном, так и в вертикальном направлениях. 
     repeat-x:  шаблон повторяется только в горизонтальном направлении. 
     repeat-y: шаблон повторяется только в вертикальном направлении. 
     no-repeat: шаблон печатается только один раз и не повторяется.
    
    
    Пример -1: шаблоны холста HTML5
    
    
    В следующем примере загружаются два изображения - pattern1.png и pattern2.png, и они превращаются в шаблоны, каждый из которых используется для обводки линии и заполнения прямоугольника.
    
    
    Вывод:
    
    
    
    
    
    Код:
     Пример: пример шаблона холста HTML5       var canvas = document. getElementById ("demoCanvas");  if (canvas.getContext) {var ctx = canvas.getContext ("2d");//создаем новый объект изображения для использования в качестве шаблона var image1 = new Image (); var image2 = new Image (); image1.src = 'http  ://www.w3resource.com/html5-canvas/images/pattern1.png '; image2.src =' http://www.w3resource.com/html5-canvas/images/pattern3.png';var pat1 = ctx  .createPattern (изображение1, «повтор»); var pat2 = ctx.createPattern (изображение2, «повторение»);  ctx.lineWidth = 4;//обводка линии и заливка прямоугольника узором блокаctx.beginPath (); ctx.moveTo (50, 10); ctx.lineTo (150, 10); ctx.strokeStyle = pat1; ctx.stroke ()  ; ctx.fillStyle = pat1; ctx.fillRect (50, 20, 100, 150); //обводка линии и заливка прямоугольника пробковым узоромctx.beginPath (); ctx.moveTo (200, 10); ctx.lineTo (300, 10); ctx.strokeStyle = pat2; ctx.stroke (); ctx.fillStyle = pat2  ; ctx.fillRect (200, 20, 100, 150);}
    
    
    Редактор кода:
    
    
    См. общий редактор Pen html css от w3resource (@ w3resource) наCodePen.
    
    
    
  2. Градиенты
  3. Пример -1: HTML5 Canvas Radial gradient
  4. Шаблоны

Введение

В холсте HTML5 вы можете заливать или обводить фигуры и текст с помощью метода stroke () или fill (). Когда мы рисуем текст или фигуры, используется текущий стиль обводки или заливки. В качестве обводки или стиля заливки можно задать цвет, узор или градиент.

Градиенты

Градиенты состоят из непрерывных плавных переходов цвета вдоль вектора от одного цвета к другому, возможно, сопровождаемых дополнительными переходами вдоль того же вектора к другим цветам. HTML5 Canvas (2D) поддерживает два вида градиента: линейный и радиальный.

Линейный градиент:

Линейный градиент определяет изменение цвета вдоль линии между двумя точками. Вы можете создать линейный градиент, вызвав метод createLinearGradient (). Вот синтаксис и параметры метода:

Синтаксис:

 var gradient = ctx.createLinearGradient (x0, y0,  x1, y1); 
Параметры Тип Описание

x0

число Координата x (в пикселях) начальной точки градиента.
y0 number Координата Y (в пикселях) начальной точки градиента.
x1 number Координата x (в пикселях) конечной точки градиента.
y1 number Координата Y (в пикселях) конечной точки градиента.

Следующим шагом в определении градиента является добавление как минимум двух цветовых точек. Для этого используйте метод addColorStop (). Вот синтаксис и параметры метода:

Синтаксис:

 gradient.addColorStop (offset, color); 
Параметры Тип Описание
offset number Значение с плавающей запятой между 0,0 и 1,0, которое представляет позицию, где 0 — начало градиента, а 1 — конец ..
color number Цветовая строка CSS для отображения в позиции, указанной в параметре смещения.

Пример: HTML5 Canvas Линейный градиент

Следующий веб-документ создает градиент:

Вывод:

      Холст HTML5 -  Пример линейного градиента       var canvas = document.getElementById ("d  emoCanvas ");  если (холст.getContext) {var ctx = canvas.getContext ("2d");  var gradient = ctx.createLinearGradient (10, 90, 200, 90); gradient.addColorStop (0, 'черный'); gradient.addColorStop (1, 'white'); ctx.fillStyle = gradient; ctx. fillRect (10, 10, 200, 250);  }     

Пример: линейный градиент холста HTML5 с использованием значения цвета RGBa ()

Вы можете создать градиент, указав границу цвета с помощью значения цвета RGBa (), которое включает степени прозрачности. В следующем примере рисуется четыре прямоугольника, каждый с градиентом, идущим в другом направлении, от красного до 50% прозрачного синего.

Вывод:


Код:

      HTML5 Canvas - пример линейного градиента       var canvas = document.getElementById ("demoCanvas");  если (холст.getContext) {var ctx = canvas.getContext ("2d");  var gradient1 = ctx.createLinearGradient (0, 0, 50, 0); gradient1.addColorStop (0, 'красный'); gradient1.addColorStop (1, 'rgba (0, 0, 255, 0.5)'); ctx.fillStyle  = gradient1; ctx.fillRect (0, 0, 75, 75);  var gradient2 = ctx.createLinearGradient (0, 0, 0, 50); gradient2.addColorStop (0, 'красный'); gradient2.addColorStop (1, 'rgba (0, 0, 255, 0.5)'); ctx.fillStyle  = gradient2; ctx.fillRect (75, 0, 75, 75);  var gradient3 = ctx.createLinearGradient (150, 0, 200, 50); gradient3.addColorStop (0, 'красный'); gradient3.addColorStop (1, 'rgba (0, 0, 255, 0.5)'); ctx.fillStyle  = gradient3; ctx.fillRect (150, 0, 75, 75);  var gradient3 = ctx.createLinearGradient (275, 50, 225, 0); gradient3.addColorStop (0, 'красный'); gradient3.addColorStop (1, 'rgba (0, 0, 255, 0.5)'); ctx.fillStyle  = gradient3; ctx.fillRect (225, 0, 75, 75);  }    

Пример: HTML5 Canvas Rainbow gradient

В следующем примере создается градиент радуги с семью цветами, каждый цвет имеет 1/6 расстояния вдоль градиента.

Результат:

Код:

      HTML5 Canvas - Радужный градиент       var canvas = document.getElementById (" demoCanvas ");  если (холст.getContext) {var ctx = canvas.getContext ("2d");  var gradient = ctx.createLinearGradient (10, 0, 500, 0); gradient.addColorStop (0, 'красный'); gradient.addColorStop (1/6, 'оранжевый'); gradient.addColorStop (2/6, 'желтый  '); gradient.addColorStop (3/6,' green '); gradient.addColorStop (4/6,' blue '); gradient.addColorStop (5/6,' indigo '); gradient.addColorStop (1,' фиолетовый  '); ctx.fillStyle = gradient; ctx. fillRect (0, 0, 500, 75);}    

Радиальный градиент:

Радиальный градиент определяет изменение цвета вдоль конуса (трехмерной геометрической формы) между двумя кругами. Вы можете создать радиальный градиент, вызвав метод createRadialGradient () и передав два круга, а также указав исходный и целевой радиус окружности.

Синтаксис:

 var gradient = ctx.createRadialGradient (x0, y0, r0, x1, y1, r1) 
Параметры Тип Описание
x0 number Координата x (в пикселях) начальной окружности градиента.
y0 number Координата Y (в пикселях) начальной окружности градиента.
rad0 number Радиус начальной окружности.
x1 number Координата x (в пикселях) конечной окружности градиента.
y1 number Координата y (в пикселях) конечной окружности градиента.
rad1 number Радиус конца круг.

Следующим шагом будет добавление как минимум двух цветовых точек. Для этого используйте метод addColorStop ().

Пример -1: HTML5 Canvas Radial gradient

Следующий веб-документ определяет радиальный градиент и использует его для заполнения круга .

Вывод:

Код:

      Пример: HTML5 Canvas Radial  градиент example1      var canvas = document.getElementById ("demoCanvas");  если (холст.getContext) {var ctx = canvas.getContext ("2d"); var gradient = ctx.createRadialGradient (85, 88, 5, 88, 90, 69); gradient.addColorStop (0, 'белый');  gradient.addColorStop (1, 'черный'); ctx.fillStyle = gradient; ctx.arc (90, 90, 60, 0, 2 * Math.PI); ctx.fill ();  }    

Пример 2: Радиальный градиент холста HTML5

В следующем веб-документе мы определили два разных градиента. Поскольку мы можем контролировать начальную и конечную точки градиента, мы можем создавать более сложные эффекты. Здесь мы немного сместили начальную точку от конечной, чтобы получить сферический 3D-эффект.

Вывод:

Код:

      Пример: HTML5 Canvas Radial gradient example2      var canvas = document.  getElementById ("demoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ("2d");//Создание градиентов var g1 = ctx.createRadialGradient (45,45,10,52,50,30);  g1.addColorStop (0, '# A7D30C'); g1.addColorStop (0.9, '# 019F62'); g1.addColorStop (1, 'rgba (1,159,98,0)'); var g2 = ctx.createRadialGradient (125  , 45,20,132,50,30); g2.addColorStop (0, '# FF5F98'); g2.addColorStop (0.75, '# FF0188'); g2.addColorStop (1, 'rgba (255,1,136,0)'  );//рисуем фигуры ctx.fillStyle = g1; ctx.fillRect (0,0,150,150); ctx.fillStyle = g2; ctx.fillRect (100,0,170,150);}     

Шаблоны

Шаблон используется для заливки или обводки объекта с использованием предварительно определенного графического объекта, который может быть реплицирован ("мозаичен") при фиксированном интервалы по x и y для покрытия окрашиваемых участков. Шаблон состоит из источника изображения - такого как JPG, GIF, PNG, SVG или текущий воспроизводимый кадр видео - и настройки повторения для создания шаблона из фрагментов изображения.

Вы создаете шаблон, используя метод контекста createPattern (), передавая объект изображения и параметр «repeat».

Синтаксис:

 var pattern = ctx.createPattern (изображение, повторение); 
Параметры Тип Описание
image Объект Изображение, холст или видеоэлемент используемого шаблона.
повтор number Направление повторения. Строка «repeat» повторяет изображение как по горизонтали, так и по вертикали, но вы можете указать одно из следующих значений -
repeat: шаблон повторяется как в горизонтальном, так и в вертикальном направлениях.
repeat-x: шаблон повторяется только в горизонтальном направлении.
repeat-y: шаблон повторяется только в вертикальном направлении.
no-repeat: шаблон печатается только один раз и не повторяется.

Пример -1: шаблоны холста HTML5

В следующем примере загружаются два изображения - pattern1.png и pattern2.png, и они превращаются в шаблоны, каждый из которых используется для обводки линии и заполнения прямоугольника.

Вывод:

Код:

      Пример: пример шаблона холста HTML5       var canvas = document. getElementById ("demoCanvas");  if (canvas.getContext) {var ctx = canvas.getContext ("2d");//создаем новый объект изображения для использования в качестве шаблона var image1 = new Image (); var image2 = new Image (); image1.src = 'http  ://www.w3resource.com/html5-canvas/images/pattern1.png '; image2.src =' http://www.w3resource.com/html5-canvas/images/pattern3.png';var pat1 = ctx  .createPattern (изображение1, «повтор»); var pat2 = ctx.createPattern (изображение2, «повторение»);  ctx.lineWidth = 4;//обводка линии и заливка прямоугольника узором блокаctx.beginPath (); ctx.moveTo (50, 10); ctx.lineTo (150, 10); ctx.strokeStyle = pat1; ctx.stroke ()  ; ctx.fillStyle = pat1; ctx.fillRect (50, 20, 100, 150); //обводка линии и заливка прямоугольника пробковым узоромctx.beginPath (); ctx.moveTo (200, 10); ctx.lineTo (300, 10); ctx.strokeStyle = pat2; ctx.stroke (); ctx.fillStyle = pat2  ; ctx.fillRect (200, 20, 100, 150);}    

Редактор кода:

См. общий редактор Pen html css от w3resource (@ w3resource) наCodePen.

Оцените статью
nanomode.ru
Добавить комментарий