Canvas - 使用画布实现文本阴影

前言

HTML5为网页设计引入了一个新元素，即画布（canvas）元素。该元素用于在网页中使用JavaScript实时创建图形。

 

准备工作

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

 

实现方式

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

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

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

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

文本内容及属性可以直接通过下面的JavaScript代码设置，但是也可以通过DOM中的变量来传入。

回到HTML代码，给body元素添加onload="drawCanvas();"脚本命令。当页面加载时，JavaScript将触发绘制事件，从而将文本及其阴影绘制到画布中，如下面的截图所示。

 

工作原理

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