Canvas - 使用画布实现内侧阴影和外侧阴影

时间:2024-04-08 13:13:37

前言

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

 

准备工作

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

 

实现方式

在开始之前,先创建一个含有画布元素的简单HTML页面。

Canvas - 使用画布实现内侧阴影和外侧阴影

通过JavaScript从DOM中取得该画布元素。

Canvas - 使用画布实现内侧阴影和外侧阴影

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

Canvas - 使用画布实现内侧阴影和外侧阴影

下面这段脚本通过多种效果的组合来实现内侧阴影和外侧阴影。脚本中添加了一个投影和两个相异的轮廓。首先,添加一个阴影到左上角,背景色为黑色,并使得context.shadowBlur属性的值为2。然后调用context.fillText方法,并给画布的context对象设置context.strokeStyle和context.strokeText属性。

Canvas - 使用画布实现内侧阴影和外侧阴影

与突起的外观效果不同,该特效使得文本有一定的倾斜角度,并且有一个内发光的阴影效果。这种效果如下图所示。

Canvas - 使用画布实现内侧阴影和外侧阴影

 

工作原理

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