javascript - 文本垂直居中 Canvas

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. 使用 centeringY 在 yes-draw 模式下再次运行 wrapText。

示例代码和演示:

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

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>