Я пытаюсь сделать эффект изогнутого текста, используя CSS3, HTML Canvas или даже SVG (см., например, изображение ниже)? Это возможно? Если да, то как я могу достичь этого эффекта?
Обновление:. Чтобы уточнить: текст, который будет создан таким образом, будет динамическим.
SVG поддерживает прямой текст по-пути, хотя он не "сгибает" отдельные глифы вдоль пути. Здесь пример того, как вы его создаете:
...
<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>
...
Вы можете, конечно, сделать это с помощью холста, попробуйте этот код в качестве примера:
<!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>
Он не делает это точно, но я уверен, что вам удастся настроить его по своему вкусу;)
Или вы можете сделать это, используя какой-то 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>
Это не чистое решение для CSS, но CircleType.js отлично работает для закодированного текста.
Существует плагин jQuery для кривого текста с использованием CSS3 под названием arctext.js. Это довольно хорошо и имеет ряд вариантов конфигурации. Я думаю, это не сработает на IE8, но я думаю, что большинство вещей CSS3 этого не делают!
Здесь также есть демонстрационная страница с некоторым примером ее в действии здесь.
<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>
Вы можете попробовать этот плагин jQuery http://codecanyon.net/item/jquery-text-arch/3669779
Он имеет множество возможностей для настройки текстовых арк и текстовых кругов.
Работает во всех основных браузерах и ОС
Мне удалось запустить примеры из http://apike.ca/prog_svg_text.html в Chrome, но он не работает в IE.
Вы можете использовать SVGWeb, http://code.google.com/p/svgweb/
В качестве альтернативы вы можете написать свою собственную утилиту для создания изображений на сервере (в .NET/PHP), например, Http-обработчик и передать текст, и он будет возвращать GIF/PNG, используя графическую библиотеку и отображая изображение на лету для вас.
Я понимаю, что это на год, но вот мое решение
он обтекает текст вокруг, но я не могу понять, как перевернуть буквы по вертикали внизу, потому что я действительно действительно ненавижу трансформации холста, и я не могу окунуться в голову, как сделать два поворота на текст ( переверните один раз вдоль оси y и еще раз о центре воображаемого круга).
Этот tutorial показывает вам, как это сделать, используя HTML5 и холст. Один из других ответов, выше, имел аналогичную идею, чтобы использовать метод canvas.rotate. В этом также используется canvas.translate.
Я использовал упомянутый выше урок (Саймон Тьюси), чтобы написать лучшее решение, касающееся проблемы кернинга. Не использует библиотеку, чистый JS.
Посмотрите на http://jsfiddle.net/fidnut/cjccg74f/
function drawTextAlongArcInside(ctx, str, font, color, radius, angle, centerX, centerY, wspace)
Примечание: SO требует, чтобы я также добавил весь код из JSFiddle. Я не думаю, что это мудро, слишком много кода, поэтому я добавляю только имя функции.
Вы можете использовать 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>