《响应式Web设计：HTML5和CSS3实践指南》——2.3节使用画布实现文本阴影

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

2.3　使用画布实现文本阴影
HTML5为网页设计引入了一个新元素，即画布(canvas)元素。该元素用于在网页中使用JavaScript实时创建图形。

2.3.1　准备工作
画布元素会在页面上创建一个矩形区域。默认的尺寸规格为300px宽，150px高。可以使用JavaScript指定具体大小。本方法的相关示例代码激增较快，可以在Packt Publishing的网站中获取全部相关代码。

2.3.2　实现方式
首先，在一个简单的HTML页面中创建画布元素：

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

接下来使用JavaScript绘制文本。我们编写代码来设置该对象的水平和垂直阴影偏移量、模糊度及阴影颜色等属性。

2.3.3　工作原理
不用太深入了解JavaScript的工作原理，设计者就可以编写脚本操控画布元素，从而在页面加载时绘制页面所需内容。body元素的οnlοad=“drawCanvas();”命令会触发JavaScript的执行，把内容绘制到画布上。