开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《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显示了几个不同阴影效果的方块。


f41e961119fdceb950b2d799895d637ed0455a98
例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)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用纯html与css实现跳动小球加载动画
跳动小球加载动画 在网页开发中,加载动画是必不可缺的一个设计;因为在一些资源加载的时候需要让用户等待一段时间,为了使用户有更好的交互体验,一个使人身心愉悦的加载动画变必不可少。 今天为大家带来的就是一个小求跳动加载动画
0 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
FLINK在大规模实时无效广告流量检测中的应用
立即下载
《企业全面上云成功路径与实践》
立即下载