Есть ли способ кривой / дуги текста с использованием CSS3 / Canvas - PullRequest
Новая
       34

Есть ли способ кривой / дуги текста с использованием CSS3 / Canvas

51 голосов
/ 15 мая 2010

Я пытаюсь создать эффект изогнутый текст , используя CSS3, HTML Canvas или даже SVG (см. Изображение ниже)? Это возможно? Если да, то как мне достичь этого эффекта?

Обновление: Для пояснения: текст, который будет стилизован таким образом, будет динамичным.

Arched or Curved Text Example

Ответы [ 12 ]

33 голосов
/ 16 января 2011

SVG напрямую поддерживает функцию text-on-a-path, хотя он не «сгибает» отдельные глифы вдоль пути. Вот пример того, как вы его создаете: 

...
<defs>
  <path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
</defs>
<text fill="red">
  <textPath xlink:href="#textPath">Text on a Path</textPath>
</text>
...
21 голосов
/ 15 мая 2010

Вы, конечно, можете сделать это с помощью canvas, попробуйте этот код в качестве примера: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Testing min-width and max-width</title>
    <style type="text/css">

    </style>

  </head>
  <body>
      <canvas id="cnv"></canvas>
      <script type="text/javascript" charset="utf-8">
          cnv = document.getElementById("cnv");
          cnv.width = 500;
          cnv.height = 300;
          ctx = cnv.getContext("2d");
          ctx.font = "bold 12px sans-serif";
          text = "abcdefghijklm"
          for (i = 0; i < text.length; i++) {
              ctx.fillText(text[i], 300, 100);
              ctx.rotate(0.1);
          }
      </script>
  </body>
</html>

Это не совсем правильно, но я уверен, что вам удастся настроить его по своему вкусу;)

13 голосов
/ 15 мая 2010

Или вы можете сделать это с помощью некоторого CSS, но я уверен, что вы не запустите его в IE в ближайшее время. С другой стороны, классная вещь заключается в том, что текст выбирается: D 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Testing min-width and max-width</title>
    <style type="text/css">
        .num1 {
            -webkit-transform: translate(0px, 30px) rotate(-35deg); 
        }
        .num2 {
            -webkit-transform: translate(0px, 25px) rotate(-25deg); 
        }
        .num3 {
            -webkit-transform: translate(0px, 23px) rotate(0deg); 
        }
        .num4 {
            -webkit-transform: translate(0px, 25px) rotate(25deg); 
        }
        .num5 {
            -webkit-transform: translate(0px, 30px) rotate(35deg); 
        }

       span {display: inline-block; margin: 1px;}
    </style>

  </head>
  <body>
    <div style="width: 300px; height: 300px; margin: 50px auto">
      <span class="num1">a</span><span class="num2">b</span><span class="num3">c</span><span class="num4">d</span><span class="num5">e</span>
    </div>
</body>
</html>
8 голосов
/ 01 марта 2013

Это не чистое решение CSS, но CircleType.js отлично работает с арочным текстом.

http://circletype.labwire.ca/

3 голосов
/ 16 ноября 2012

Существует плагин jQuery для кривой текста с использованием CSS3, который называется arctext.js . Это довольно хорошо и имеет ряд вариантов конфигурации. Я думаю, это не будет работать на IE8, но я думаю, что большинство CSS3 не работает!

Здесь также есть демонстрационная страница с примером в действии здесь .

2 голосов
/ 05 августа 2011 
<embed width="100" height="100" type="image/svg+xml" src="path.svg">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
    </defs>
  </svg>
</embed>
1 голос
/ 21 декабря 2012

Вы можете попробовать этот плагин jQuery http://codecanyon.net/item/jquery-text-arch/3669779
У этого есть много вариантов для настройки текстовых арок и текстовых кругов.
Работает во всех основных браузерах и ОС

0 голосов
/ 18 июня 2017

Вы можете использовать SVG с TextPath следующим образом: 

<html>
<head>
<script>
 function updateMessage(str) {
document.getElementById("MyMessage").textContent = str;
 }
</script>
</head>
<body >
<button onClick="updateMessage('The text has changed');">Change the text</button>
  <svg viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="CurvedPath"
          d="M 0 150 Q 325 50 650 150 " />
  </defs>
<text font-size="54" x='325' y='50'  text-anchor="middle"  fill="darkgreen" font-family=Arial,Helvetica  style="text-shadow: 2px 2px 3px gray;"
>       <textPath id='MyMessage' xlink:href="#CurvedPath" >
THIS TEXT IS CURVED
    </textPath>
  </text>
</svg>
</body>

</html>
0 голосов
/ 26 января 2015

Я использовал вышеупомянутое руководство (от Саймона Тьюси), чтобы написать лучшее решение проблемы кернинга. Не использует библиотеку, чистый JS.

См. http://jsfiddle.net/fidnut/cjccg74f/

function drawTextAlongArcInside(ctx, str, font, color, radius, angle, centerX, centerY, wspace)

Примечание: SO требует, чтобы я также поместил здесь весь код из JSFiddle. Я не думаю, что это разумно, слишком много кода, поэтому я добавляю только имя функции.

0 голосов
/ 05 апреля 2012

Этот учебник показывает, как именно это сделать, используя HTML5 и canvas. В одном из других ответов, приведенных выше, была похожая идея использовать метод canvas.rotate. Этот также использует canvas.translate.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...