zeusbart
11/17/2017 - 5:58 AM

salto de linea en canvan

pagina.html
content_copyfile_download
<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    
  </head>

  <body>
 <canvas id="myCanvas" width="400" height="500" style="border:1px solid #000000;">
</canvas>
<script src="script.js"></script>
  </body>

</html>
salto_texto.js
content_copyfile_download
// Code goes here

var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
wrapText(context,"bartrts iusohias vela jhfjhfj",10,80,80,13);
//ctx.moveTo(0,0);
//ctx.lineTo(200,100);
//ctx.stroke();



function wrapText(context, text, x, y, maxWidth, lineHeight){
  // context.font = "30px Arial";
    //context.fillText("Hello World",10,50);
    var words = text.split(" ");
    var line = "";
    //var x=0;
    //var miy=90;
    //var maxWidth=100;
   // var lineHeight=50;
    
     context.fillStyle = "rgb(0, 255, 178)";
    context.fillRect(x, y-lineHeight, maxWidth, lineHeight*3+5);
    alert(x);
    context.font = "12pt Calibri";
    context.fillStyle = "blue"; 
 
     
    for (var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + " ";
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth) {
          alert(testWidth);
            context.fillText(line, x, y);
            line = words[n] + " ";
            y += lineHeight;
        }
        else {
            line = testLine;
        }
    }
    
    
    context.fillText(line, x, y);
   
    
}