html canvas图片上绘制文字,如何用HTML5 CANVAS绘制文字

您可能感兴趣的话题：

绘制文字

核心提示：如何在HTML5 canvas上绘制绘制文字，并且可以设置文字的字体，大小和颜色。

我们可以在HTML5 canvas上绘制绘制文字，并且可以设置文字的字体，大小和颜色。

绘制文字的字体由2D上下文的font属性来控制。如果你需要使用颜色来填充文字或制作描边文字，可以使用2D上下文的fillStyle和strokeStyle属性来完成。

要在canvas上绘制文字，可以通过2D上下文的fillText()函数或strokeText()函数来完成。下面是一个简单的例子：

var canvas = document.getElementById("ex1");

var context = canvas.getContext("2d");

context.font = "normal 36px Verdana";

context.fillStyle = "#000000";

context.fillText("HTML5 Canvas Text", 50, 50);

context.font = "normal 36px Arial";

context.strokeStyle = "#000000";

context.strokeText("HTML5 Canvas Text", 50, 90);

下面的图片是上面代码的返回结果：