1

Suponiendo que quiero escribir una reseña de un libro sólo con canvas, ¿cómo puedo lograr que el texto del método fillText(), funcione como un <p> , osea que al llegar al borde horizontal de la web, siga escribiéndose debajo?

teniendo lo siguiente:

ctx.fillText("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nisl sem, cursus non odio et, tincidunt gravida enim. Mauris nec est ullamcorper, ultrices est at, rutrum nunc. Quisque ornare molestie ullamcorper. Vivamus luctus pellentesque felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse id lorem tortor. Mauris urna sapien, pretium nec condimentum et, ornare quis dolor. Sed dictum lectus ut odio lacinia rhoncus. Donec porta turpis et finibus laoreet. Nam vel ante nisi. Sed id efficitur augue.");
ctx.fill();
1
  • Deberías hacer el cálculo con java Script e ir escribido letra por letra (en un bucle for) en el que se tenga en cuenta la posición de cada letra que se está escribiendo, si el largo de la siguiente palabra que se va a escribir sobrepasa el lado derecho de la pantalla bajas un renglón aumentando el valor del eje y y restando al del eje x.
    – lromeraj
    Commented el 14 ago. 2017 a las 8:34

1 respuesta 1

1

Te he hecho un pequeño script con el cual se consigue más o menos lo que pretendes:

var wW = window.innerWidth,
		wH = window.innerHeight, 
    canvas, 
    ctx;

function prepareCanvas() {
	canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  canvas.width = wW;
  canvas.height = wH;
}
prepareCanvas();

function writeText(param) {
	var xStart = param.x;
  var yStart = param.y;
  var x = xStart,
  		y = yStart;
  var fontSize = param.fontSize;
	var txt = param.txt;
  
  ctx.beginPath();
  ctx.textAlign = 'right';
  ctx.textBaseline = 'top';
  ctx.font=fontSize+'px Arial';
  for (let i=0; i < txt.length; i++) {
  	var letter = txt[i];
  	if (x < canvas.width + ctx.measureText(letter).width) {
    	x+=ctx.measureText(letter).width;
    } else {
    	x = xStart;
      y+=fontSize;
    }
    ctx.fillText(letter,x,y);
  }
  ctx.closePath();
}

writeText({
  x: 0,
  y: 0,
  fontSize: 20,
  txt: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
});
<canvas id="canvas">
  Tu navegador no soporta canvas :`(
</canvas>

Es un sencillo ejemplo, y por supuesto puede mejorarse mucho más, pero para que te hagas una idea de cómo se podría hacer.

Espero que sirva de ayuda

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.