《HTML5 canvas开发详解（第2版）》——2.10　创建阴影

简介：

本节书摘来自异步社区《HTML5 canvas开发详解（第2版）》一书中的第2章，第2.10节,作者： 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.10　创建阴影

读者可以使用4个参数给画布上的形状添加阴影。与2.9节所讲的填充图案一样，这项功能还没有被所有兼容HTML5的浏览器完全支持。

可以通过设置以下4个Canvas参数来添加阴影：

• shadowOffsetX；
• shadowOffsetY；
• shadowBlur；
• shadowColor。

shadowOffsetX和shadowOffsetY值可以为正值或负值——负值将会在左侧和上方创建阴影，反之将会在底部和右侧创建阴影。shadowBlur属性用来设置阴影模糊效果的程度。这3个参数都不受当前Canvas变换矩阵影响。shadowColor属性可以是任何HTML4颜色的常量字符串——rgb()或rgba()——或者是十六进制数值字符串。

例2-27和图2-39显示了几个不同阴影效果的方块。

例2-27　给对象添加阴影

function drawScreen(){

　　　context.fillStyle = 'red';

　　　context.shadowOffsetX = -4;
　　　context.shadowOffsetY = -4;
　　　context.shadowColor = 'black';
　　　context.shadowBlur = 4;
　　　context.fillRect(10,10,100,100);

　　　context.shadowOffsetX = -4;
　　　context.shadowOffsetY = -4;
　　　context.shadowColor = 'black';
　　　context.shadowBlur = 4;
　　　context.fillRect(150,10,100,100);

　　　context.shadowOffsetX = 10;
　　　context.shadowOffsetY = 10;
　　　context.shadowColor = 'rgb(100,100,100)';
　　　context.shadowBlur = 8;
　　　context.arc(200, 300, 100, (Math.PI/180)*0, (Math.PI/180)*360, false)
　　　context.fill();
}
!```  
[screenshot](https://yqfile.alicdn.com/f41e961119fdceb950b2d799895d637ed0455a98.png)