HTML5 画布上的多行文本

Question

所以我尝试使用 HTML5 画布创建一个 Meme 生成器。我知道我可以使用以下内容在画布上书写：

ctx.filltext()

然而，我只能在画布上写一次。有谁知道我如何可以在画布上多次书写，甚至多次书写两次。与模因生成器一样，它们在图像的顶部和底部各有一行文本。如果不可能，任何人都可以让我知道或为我指出教程/答案的方向，它可以让我在图像上书写文本，包括更改字体和字体大小以及顶部/底部、左/右。

感谢任何能提供帮助的人。

Answer 1

您可以创建一个函数，根据所需的样式参数绘制文本：

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

drawText('This is the top',canvas.width/2,20,24,'verdana');
drawText('This is the bottom',canvas.width/2,canvas.height-20,16,'Courier');

function drawText(text,centerX,centerY,fontsize,fontface){
  ctx.save();
  ctx.font=fontsize+'px '+fontface;
  ctx.textAlign='center';
  ctx.textBaseline='middle';
  ctx.fillText(text,centerX,centerY);
  ctx.restore();
}

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

<canvas id="canvas" width=300 height=300></canvas>