как создать canvas с градиентом

#javascript #jquery #html5 #canvas

Ка сделать так чтобы по ид создавались новые canvas в зависимости от текста
то есть
Внутри canvas прозрачный цвет только граница с градиентом нужна









    

Ответы

Ответ 1

Давайте покрасим каждый пиксель сами, для этого используем математику и прямые манипуляции
с с пикселями, такой подход позволяет очень точно посчитать различные эффекты, сложно
достижимые при обычном рисовании встроенными методами.  

Я недавно задавал  вопрос-ответ на этот счет, в этом примере применен тот же подход: 



^^ это анимированный гиф, хоть и не заметно почти



Пару слов о том как это работает.

Signed Distance Function(или Field) - это такой механизм определения минимального
расстояния до ближайшего объекта сцены. 

SDF может быть задан формулами или массивом значений расстояний (обычно это один
канал текстуры)

Вот пример изображения с sdf для звезды, это по сути обрамляющий градиент вокруг фигуры



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

В коде ниже использована формула, которая возвращает расстояние до скругленного прямоугольника.
Больше формул тут. Формулы эти можно всячески комбинировать и использовать получившуюся
функцию для получения изображения объектов, (не обязательно в 2d, так же можно получать
изображения 3d объектов используя SDF и трассировку лучей)



let c = canvas.getContext('2d'), w = canvas.width, h = canvas.height   
 
requestAnimationFrame(draw) 
 
function draw(t) {  
  let i = c.getImageData(0, 0, w, h) 
  // цикл по всем пикселям 
  for(var x = 0; x < w; x++) { 
  for(var y = 0; y < h; y++) { 
      let v = px(x, y, t) 
      let o = (y*w + x)*4     
      i.data[o++] = v[0]*255 
      i.data[o++] = v[1]*255 
      i.data[o++] = v[2]*255 
      i.data[o++] = v[3]*255 
  }} 
  c.putImageData(i, 0, 0) 
  requestAnimationFrame(draw) 
} 
 
// функция дистанции до скругленного прямоугольника 
// https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm 
function sdRoundBox(x, y, sx, sy, r) { 
  x = Math.abs(x) - sx; 
  y = Math.abs(y) - sy; 
  sx = Math.max(x, 0);  
  sy = Math.max(y, 0); 
  return Math.min(Math.max(x, y), 0) + Math.sqrt(sx*sx + sy*sy) - r; 
} 
 
// функция которая определяет цвет пикселя 
function px(x, y, t) { 
  // определим минимальное расстояние от текущего пикселя до нашей фигуры 
  let d = Math.abs(sdRoundBox(2*x-w, 2*y-h, 150, 40, 15)); 
  if (d>16) return [0, 0, 0, 0] 
  // и используем это расстояние и координату пикселя по х для определения цвета
пикселя 
  let c = Math.min(d/32 + 0.3 + Math.sin(t/1000)*0.1, d/8); 
  return [0.4+(x/w+1-y/h)*0.3, c, 1, 1-c]; 
}



Ответ 2

Можно создать градиент с помощью функции ctx.createLinearGradient()

Пример кода:



let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

//создаем градиент
let gradient = ctx.createLinearGradient(20, 0, 220, 0);

//добавляем три точки остановки
gradient.addColorStop(0, 'green');
gradient.addColorStop(.5, 'cyan');
gradient.addColorStop(1, 'green');

//рисуем контур прямоугольника с помощью ерадиента
ctx.strokeStyle = gradient;
ctx.strokeRect(20, 20, 200, 100);





Функция ctx.createLinearGradient() принимает четыре аргумента:

x0 - Координата по оси X начальной точки.
y0 - Координата по оси Y начальной точки.
x1 - Координата по оси X конечной точки.
y1 - Координата по оси Y конечной точки.  

Чтобы задать точки останова используется функция gradient.addColorStop();, принимающая
два параметра: первый - смещение от начала градиента  (не должен выходить за пределы
0 - 1), где будет расположена точка останова, второй - цвет до которого дойдет градиент
в этой точке останова.