HTML5画布上的多行文字

Question

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

\\s

但是，我只能在画布上写一次。有谁知道我怎么能在画布上写多次，甚至多次。与Meme生成器一样，它们在顶部有一行文本，在图像底部有一行。如果不可能，任何人都不可能让我知道或指向我的教程/答案的方向，可以让我在文本的图像上写，包括更改字体和字体大小加上上/下，左/右。

感谢任何可以提供帮助的人。

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;