阴影

可以使用带有2D上下文对象的阴影在视觉上增强路径的显示效果。 阴影是路径周围具有偏移、颜色和特殊模糊的区域。 为此，可以指定shadowColor、shadowOffsetX、shadowOffsetY和shadowBlur，所有这些都需要使用2D上下文来定义，2D上下文是绘图操作唯一的API。

阴影也用作在路径周围创建发光效果。 在下一个示例中，我们创建了一个文本“Canvas”，周围有白光。 所有这些都在深色背景下进行，以提高可见度。

首先，绘制黑色背景：

// setup a dark background
ctx.strokeStyle = "#333"
ctx.fillRect(0,0,canvas.width,canvas.height);

接下来，定义阴影配置，这将用于下一个路径：

// setup a blue shadow
ctx.shadowColor = "#2ed5fa";
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 10;

最后，使用Ubuntu字体系列中的80px、加大、加粗字体体绘制“Canvas”文本。

// render green text
ctx.font = 'bold 80px sans-serif';
ctx.fillStyle = "#24d12e";
ctx.fillText("Canvas!",30,180);