文本垂直居中画布

Question

我有这个小脚本。如何使文本垂直居中？换句话说，我需要从函数“wrapText”中取出一个变量，以便使用它来计算文本的位置。多谢！

<canvas id="myCanvas" width="900" height="600" style="display:none;"></canvas>
<img id="canvasImg">

<script>

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();

imageObj.onload = function()
{
    context.drawImage(imageObj, 0, 0);
}  

imageObj.src = "img/imagea.jpg"; 

var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(e)

{
    var text = document.getElementById('area1').value;

 if(text.lenght == 0)
    {
         alert("you forgot to put something");
    }



function wrapText(context, text, x, y, maxWidth, lineHeight) {

    var convtext = text.replace(/\n/g, ' |br| ');
    var words = convtext.split(' ');
    var line = '';

     for(var n = 0; n < words.length; n++) {
      var newline = false;
    if (words[n].indexOf("|br|") > -1) newline = true;

    var metrics = maxWidth;
    var testWidth = maxWidth;
    var testLine = line + words[n] + ' ';

    if (context.measureText) {
    metrics = context.measureText(testLine);
    testWidth = metrics.width;
    }

    if ((testWidth > maxWidth && n > 0) || newline) {
    context.fillText(line, x, y);
    if (!newline) line = words[n] + ' ';
    if (newline) line = "";
    y += lineHeight;
    } else {
    line = testLine;
    }

    }

    context.fillText(line, x, y);

  }


  var maxWidth = 500;
  var lineHeight = 40;
  var x = 100;
  var y = 100;


 context.font = "30pt HelveticaNeue-Light";
 wrapText(context, text, x, y, maxWidth, lineHeight);
 context.fillStyle = "#009bdc";
 context.fillText("try", 100, 500);


  var dataURL = canvas.toDataURL();

  document.getElementById('canvasImg').src = dataURL;

    e.preventDefault();


});

</script>

Answer 1

就是这样：

1. 修改wrapText以返回结束height值（以便您可以计算段落高度）。
2. 修改wrapText为可选不绘制（==可选，不做fillText）
3. 在无绘制模式下运行wrapText一次以获取换行段落的高度。
4. 计算y将产生垂直居中段落的起始位置：var centeringY = maxHeight/2 - paragraphHeight/2
5. wrapText使用 再次在 yes-draw 模式下运行centeringY。

示例代码和演示：

垂直居中的一段换行文本...

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var maxWidth = 150;
var lineHeight = 20;
var x = 100;
var y = 100;
var text='It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness.';

context.font='12px verdana';

var height=wrapTextVCentered(context,text,x,y,maxWidth,lineHeight,true);

var y=(canvas.height-height)/2;

wrapTextVCentered(context,text,x,y,maxWidth,lineHeight,false);

context.strokeStyle='green';
context.strokeRect(x,y,maxWidth,height);

function wrapTextVCentered(context,text,x,y,maxWidth,lineHeight,measureOnly){
  var height=0;
  var convtext = text.replace(/\n/g, ' |br| ');
  var words = convtext.split(' ');
  var line = '';

  context.textBaseline='top';

  for(var n = 0; n < words.length; n++){
    var newline = false;
    if (words[n].indexOf("|br|") > -1) newline = true;

    var metrics = maxWidth;
    var testWidth = maxWidth;
    var testLine = line + words[n] + ' ';

    if (context.measureText){
      metrics = context.measureText(testLine);
      testWidth = metrics.width;
    }

    if ((testWidth > maxWidth && n > 0) || newline){
      if(!measureOnly){ context.fillText(line, x, y); }
      if (!newline) line = words[n] + ' ';
      if (newline) line = "";
      y += lineHeight;
      height += lineHeight;
    } else {
      line = testLine;
    }
  }
  if(!measureOnly){ context.fillText(line, x, y); }

  height += lineHeight;
  return(height);
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<h4>Vertically centered paragraph on canvas</h4>
<canvas id="canvas" width=350 height=350></canvas>