1

Как сделать, что бы из атрибута data-word брались слова и вставлялись внутри canvas

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];
}
<canvas width="200" height="100" id="canvas" data-word="Буквы"/>

2
  • @Kromster как добавить внутри canvas буквы так норм?
    – Vadim
    27 мая 2019 в 6:14
  • Так лучше, спасибо
    – Kromster
    27 мая 2019 в 6:26

1 ответ 1

1

Хоть основная часть изображения нарисована прямыми манипуляциями с пикселями, текст все же надо рисовать встроенными методами, хоть и вышеописанным способом тоже было бы можно, но простыня растянулась бы до Китая

let ctx = canvas.getContext('2d')
ctx.font = "30px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle"; 
ctx.fillStyle = 'hsl(250,55%,55%)' 
ctx.fillText(canvas.getAttribute('data-word'), w/2, h/2)

let c = canvas.getContext('2d'), w = canvas.width, h = canvas.height  

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)
    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);
c.font = "30px Arial";
c.textAlign = "center";
c.textBaseline = "middle"; 
c.fillStyle = 'hsl(250,55%,55%)' 
c.fillText(canvas.getAttribute('data-word'), w/2, h/2)

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) {
  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.4, d/8);
  return [0.4+(x/w+1-y/h)*0.3, c, 1, 1-c];
}
<canvas width="200" height="100" id="canvas" data-word="Буквы"/>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.