《响应式Web设计：HTML5和CSS3实践指南》——2.4节使用画布实现内侧阴影和外侧阴影

本节书摘来自华章社区《响应式Web设计：HTML5和CSS3实践指南》一书中的第2章，第2.4节使用画布实现内侧阴影和外侧阴影，作者（美）　Benjamin LaGrone，更多章节内容可以访问云栖社区“华章社区”公众号查看

2.4　使用画布实现内侧阴影和外侧阴影
本方法也使用画布和JavaScript通过浏览器绘制文本和实现特殊效果。通过画布无法直接实现内侧渐变的阴影效果或插图效果，但是，使用stroke方法可以模拟文本中的内侧阴影。

2.4.1　准备工作
本方法会使用前面章节已经使用过的一段代码。可以从Packt Publishing的网站直接下载这段代码，它与2.3节中的代码是一样的。这段代码可以运行在本地电脑中，不需要任何Web服务器。可以从本书页面中得到所有相关代码。

2.4.2　实现方式
在开始之前，先创建一个含有画布元素的简单HTML页面。

然后调用getContext()方法。getContext('2d')方法的返回值是一个内置的HTML5对象。它拥有若干方法用来绘制文本、形状和图像等。

2.4.3　工作原理
正如本节的开头所述，画布元素对象并没有提供能够直接实现内侧阴影效果的方法。但是可以结合context.fillText和context.strokeStyle方法来创建一个足够逼真的内侧阴影特效。