《HTML5 Canvas开发详解》——2.10　创建阴影

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

2.10　创建阴影

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

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

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

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

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

https://yqfile.alicdn.com/522fd023f89cf2ac0980a611489e777d9d287671.png" >

例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();
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

如图2-39所示，如果同时调整shadowOffset和shadowBlur值可以创建不同的阴影。当然Canvas还可以为由路径和弧形组成的复杂形状创建阴影。