HTML5 canvas 上的多行文本

Question

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

ctx.filltext()

但是，我只能在canvas上写一次。有谁知道我如何在 canvas 上写多次甚至两次。与 Meme 生成器一样，它们在图像的顶部有一行文本，在图像的底部有一行。如果不可能，有人可以让我知道或指出 tutorial/answer 的方向，它可以让我在图像上写上文字，包括更改字体和字体大小加上 top/bottom、left/right.

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

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>

HTML5 canvas 上的多行文本

Multiline text on HTML5 canvas

html

html5-canvas

drawtext