#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]; }
Комментариев нет:
Отправить комментарий