《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)

SpringBoot框架+原生HTML开发的云电子病历系统源码 SaaS模式Java版云HIS系统的子系统云电子病历系统源码，本系统采用前后端分离模式开发和部署，支持电子病历四级。智能化模板、全结构化录入，支持全结构化选择、模板输入、表格式、文本等多种录入方式。
IOT智慧物联网平台源码 后台基于JAVA开发 前端HTML 目前web系统功能已实现： 1、 数据实时采集和远程控制； 2、 报警信息管理和报表导出； 3、 自动控制，触发管理； 4、 历史数据，报表导出功能； 5、 子账户和场景授权管理； 6、 场景信息管理；
基于.Net开发的对比Html效果差异的开源项目 基于.Net 4.5开发的对比Html文件、片段效果差异的项目。两份Html效果不一样的地方会通过颜色、删除线、背景色分别标记出来。
传统html+vue+elementUI开发&nodeJS环境搭建 Shiro提供了完整的企业级会话管理功能，不依赖于底层容器（如Tomcat、WebLogic），不管是J2SE还是J2EE环境都可以使用，提供了会话管理，会话事件监听，会话存储/持久化，容器无关的集群，失效/过期支持，对Web的透明支持，SSO单点登录的支持等特性。 所谓会话，即用户访问应用时保持的连接关系，在多次交互中应用能够识别出当前访问的用户是谁，且可以在多次交互中保存一些数据。如访问一些网站时登录成功后，网站可以记住用户，且在退出之前都可以识别当前用户是谁。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。