MDN:canvas绘制文本(四)

MDN链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text

在前一个章节中看过 应用样式和颜色 之后, 我们现在来看一下如何在canvas中绘制文本

绘制文本

canvas 提供了两种方法来渲染文本:

fillText(text, x, y [, maxWidth])

在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.

strokeText(text, x, y [, maxWidth])

在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

一个填充文本的示例

文本用当前的填充方式被填充：

function draw() {
   
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);
}
 
 
 

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

draw();

一个文本边框的示例

文本用当前的边框样式被绘制：

function draw() {
   
  var