javascript - dentro - como escribir en un canvas html5
¿Hay alguna manera de curvar/texto de arco usando CSS3/Canvas (12)
Ciertamente puede hacerlo con lienzo, pruebe este código como ejemplo:
<!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>
No lo hace exactamente bien, pero estoy seguro de que logrará ajustarlo a su semejanza;)
Estoy tratando de hacer un efecto de texto curvo usando CSS3, HTML Canvas, o incluso SVG (ver imagen a continuación, por ejemplo)? es posible? Si es así, ¿cómo puedo lograr este efecto?
Actualización: para aclarar: el texto que se diseñará de esta manera será dinámico.
Este tutorial muestra exactamente cómo hacerlo usando HTML5 y lienzo. Una de las otras respuestas, arriba, tenía una idea similar, para usar el método canvas.rotate. Este también usa canvas.translate.
Hay un complemento jQuery para curvar texto usando CSS3 llamado arctext.js . Es bastante bueno y tiene una gama de opciones de configuración. Supongo que no funcionará en IE8, pero creo que la mayoría de las cosas de CSS3 no lo hacen.
También hay una página de demostración con algunos ejemplos de esto en acción here .
Me doy cuenta de que esto es más de un año tarde, pero esta es mi solución
Envuelve el texto, pero no puedo imaginar cómo voltear las letras verticalmente en la parte inferior porque realmente odio las transformaciones del lienzo y no puedo entender cómo hacer dos rotaciones en el texto (dar la vuelta una vez el eje y y una vez más sobre el centro de un círculo imaginario).
No es una solución pura de CSS, pero CircleType.js funciona muy bien para texto en arco.
O puede hacerlo utilizando algún CSS, sin embargo, estoy seguro de que no lo ejecutará en IE en el corto plazo. Por otro lado, lo bueno es que el texto es seleccionable: 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>
Pude ejecutar ejemplos de http://apike.ca/prog_svg_text.html en Chrome pero no funciona en IE.
Puede usar SVGWeb, http://code.google.com/p/svgweb/
Alternativamente, puede escribir su propia utilidad de generación de imágenes en el sitio del servidor (en .NET / PHP) como un Http Handler y pasarle texto y devolverá GIF / PNG usando la biblioteca de gráficos y la imagen de representación sobre la marcha por usted.
Puede usar SVG con TextPath de esta manera:
<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>
Puedes probar este plugin jQuery http://codecanyon.net/item/jquery-text-arch/3669779
Tiene muchas opciones para personalizar arcos de texto y círculos de texto.
Funciona en todos los principales navegadores y sistemas operativos
SVG admite text-on-a-path directamente, aunque no ''dobla'' los glifos individuales a lo largo de la ruta. Aquí hay un ejemplo de cómo lo creas:
...
<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>
...
Utilicé el tutorial mencionado anteriormente (por Simon Tewsi) para escribir una mejor solución, con respecto al problema de kerning. No usa ninguna biblioteca, JS puro.
http://jsfiddle.net/fidnut/cjccg74f/ en http://jsfiddle.net/fidnut/cjccg74f/
function drawTextAlongArcInside(ctx, str, font, color, radius, angle, centerX, centerY, wspace)
Nota: SO exige que coloque todo el código de JSFiddle aquí también. No creo que esto sea inteligente, hay demasiados códigos, así que solo agrego el nombre de la función.
<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>