Как создать пунктирный путь из текста на холсте html5 (в настоящее время используется phaser.io) - PullRequest
Новая
       63

Как создать пунктирный путь из текста на холсте html5 (в настоящее время используется phaser.io)

1 голос
/ 27 мая 2020

Я хочу создать пунктирную букву для представления пути на холсте html, например 

function convertToDotttedPath(text, font) {

   return [{x: x0, y: y0}, {x: x1, y: y1}...] //to represent a path of text on a 2D canvas

}

Есть ли библиотека, которую я могу использовать? Я бы хотел сделать это в коде, а не вручную, используя Adobe fla sh, как показано на видео ниже.

Я пытаюсь сделать то же самое здесь, но на холсте: https://www.youtube.com/watch?v=Xi25vodMYg0

1 Ответ

1 голос
/ 30 мая 2020

Как насчет того, чтобы использовать setLineDash, он нарисовал бы букву или слово с точками ...
Код простой, примерно так: 

<canvas id="c" width=600 height=160></canvas>

<script>
  var ctx = document.getElementById("c").getContext("2d");
  ctx.font = "150px Arial";
  ctx.lineWidth = 2;
  ctx.setLineDash([3, 13]);
  ctx.strokeText("HELLO", 10, 120);
</script>

Вы можете поиграть со значениями font, lineWidth и LineDa sh, чтобы получить разные результаты 

<canvas id="c" width=600 height=160></canvas>

<script>
  var ctx = document.getElementById("c").getContext("2d");
  ctx.font = "50px Arial";
  ctx.lineWidth = 0.5;
  ctx.setLineDash([1, 4]);
  ctx.strokeText("HELLO", 10, 45);
  
  ctx.setLineDash([3, 6]);
  ctx.strokeText("WORLD", 10, 90);
</script>

Вы также можете применить его к строкам 

<canvas id="c" width=160 height=160></canvas>

<script>
  var ctx = document.getElementById("c").getContext("2d");
  ctx.translate(80, 80);  
  ctx.lineWidth = 0.5;

  function drawTriangle(size, angle) {
    ctx.beginPath();
    size = size * 12
    for (j = 0; j < 4; j++) {
      a = angle * Math.PI / 180
      x = size * Math.sin(a)
      y = size * Math.cos(a)
      ctx.lineTo(x, y);
      angle += 120
    }
    ctx.stroke();
  }

  for (i = 20; i > 0; i--) {
    ctx.setLineDash([i, i/2]);
    drawTriangle(i, i*2 - Math.sin(i / 50))
  }
</script>

И используя тот же setLineDa sh, вы можете создавать необычные анимации:

...