调用也非常的简单：

ctx.font = '60px Verdana'; ctx.textAlign = 'center'; ctx.textBaseline= 'middle'; draw3DText(ctx, 'W3cplus', w / 2, h / 2, 6, true, '#0094ed', '#000', 12, 2);

得到的效果如下：

这个示例通过将 fillText() 或者 strokeText() 的 (x, y) 设置为 canvas 宽度和高度的一半 (w / 2, h / 2) 再配合 ctx.textAlign = 'center' 和 ctx.textBaseline= 'middle' 可以实现所绘文本在画布的中间，也就是实现了我们常说的水平垂直居中的效果。

另外，把上面两外效果结合起来，就可以实现圆形的3D文本效果，要是再添加一点动画功能，效果就不一样了：

总结

这篇文章我们主要介绍了在Canvas中绘制文本的一些基础知识，在Canvas中可以通过 ctx.fillText() 绘制填充文本， ctx.strokeText() 可以绘制描边文本，另外通过 ctx.textAlign 和 ctx.textBaseline 设置所绘制文本的位置，并且使用 ctx.measureText('text').width 可以得到所绘制文本 text 的宽度值，虽然这个值并不精确，但在Canvas中有方法可以解决，至于怎么解决我们后续的内容将会介绍。

虽然这些功能是绘制文本的基本功能，但结合Canvas其他的功能，我们可以绘制出很多不同的文本效果，至于绘制出什么样的效果，则需要大家去思考，因为创意是自己的，有了创意，然后结合自己所掌握的Canvas知识，能做的事情就更多了。如果你有更好的创意，希望在下面的评论中与我们一起分享。

分享给小伙伴们：

本文标签： Canvas/">Canvas

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。