12.11 HTML 画布阴影

在画布上实现PS一样的阴影特效

所有人都喜欢好看的阴影效果,它们可能是Adobe Photoshop中使用最广泛的效果了,并且也经常在Web和图形设计中使用。如果操作正确,它们实际上确实能够增加图像真实感。然而,如果操作不当,它们也可能完全毁掉一个图像。

在画布中创建阴影效果是相对较简单的,它可以通过4个全局属性进行控制。这些属性是shadowBlur、shadowOffsetX、shadowOffsetY和shadowColor。我们马上开始逐一讲解这些属性。

默认情况下,2D渲染上下文是不会绘制阴影效果的,因为shadowBlur、shadowOffsetx和shadowOffsetY都设置为0,而shadowColor设置为透明黑色。

创建阴影效果的唯一方法是将shadowColor修改为不透明值,同时将shadowBlur、shadowOffsetX或shadowOffsetY都设置为非0值:

context.shadowBlur = 20;
context.shadowColor = "rgb(0, 0, 0)";
context.fillRect(50, 50, 100, 100); 

在这个例子中,给阴影设置了20像素的模糊值,并将它的颜色设置为完全不透明的黑色。阴影的偏移值在x轴和y轴方向仍然保持为默认值0。需要特别指出的是,即使使用了不透明的黑色,但由于采用了模糊效果,这个阴影在边界上仍然有些透明效果(参见图1)。

基本阴影效果

修改shadowBlur,shadowoffsetX或shadowOffsetY属性,就能够创建不同的阴影效果:

context.shadowBlur = 0; 
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = "rgba(100, 100, 100, 0.5)"; // Transparent grey 
context.fillRect(200, 50, 100, 100); 

将模糊修改为0,创建清晰的阴影效果,而稍微向右下偏移,就得到一个不同的阴影效果。使用rgba颜色值将shadowColor设置为透明浅灰色,就能够实现更炫的效果(参见图2)。

创建不同的阴影效果

画布的阴影支持所有图形,所以完全可以在所绘制的圆形或其他图形上创建阴影效果。甚至可以将颜色修改为任意奇特的值:

context.shadowColor = "rgb(255, 0, 0)"; // Red 
context.shadowBlur = 50; 
context.shadowOffsetX = 0; 
context.shadowOffsetY = 0; 
context.beginPath(); 
context.arc(400, 100, 50, 0, Math.PI*2, false); 
context.closePath(); 
context.fill(); 

这段代码会得到一个非常漂亮的圆形,它后面有一个鲜红色阴影效果(参见图3)。

在圆形上绘制阴影

通过组合使用各种模糊和颜色值,我们就能够实现一些与阴影完全无关的效果。例如,使用模糊黄色阴影在一个对象周围创建出光照效果,如太阳或发光体。