javascript salto de linea en canvan

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript salto de linea en canvan相关的知识，希望对你有一定的参考价值。

<!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>

// 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);
   
    
}

以上是关于javascript salto de linea en canvan的主要内容，如果未能解决你的问题，请参考以下文章

css span nowrap，no salto de linea wrapspan

PHP salto de linea en PFDF（generador de PDFs en PHP）

php nl2p saltos de linea parrafos br BR ln lineas editor texto parrafo PHP

css Word wrap css / whitespace / evitar saltos de linea / truncate string ellipsis

markdown Trucos para linea de comandos

text Vim淘汰赛espacios al final de linea