中心文本垂直画布

Question

我有这个小脚本。 如何将文本垂直居中？换句话说，我需要从函数＆＃34; wrapText＆＃34;中找出一个变量。为了用它来计算文本的位置。非常感谢！

<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

示例代码和演示：

包裹文字的一段，它是垂直居中的......



＆＃13;
＆＃13;
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);
}
＆＃13;
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
＆＃13;
<h4>Vertically centered paragraph on canvas</h4>
<canvas id="canvas" width=350 height=350></canvas>
＆＃13;
＆＃13;
＆＃13;