课程免费试听
网络营销培训专家:新川教育
   著名网络营销培训、淘宝电商培训机构.
实力机构,系统实战!免费试听.
网络营销,淘宝培训课程优惠
绘制阴影和透明效果《HTML5系列教程20》

来源:新川教育 阅读数:2715
添加时间:2017-4-30   类别:网页设计教程

体育彩票开奖号码:绘制阴影和透明效果《HTML5系列教程20》

绘制阴影和透明效果《HTML5系列教程20》

福建31选7开奖时间 www.tzh2.cn     我们在设计一些图形的时候,经常要将几个或多个图形组合到一起,而为了使显示效果更加逼真,还需要给组合的图形绘制阴影和透明效果。今天我们介绍在HTML5中如何利用Canvas来轻轻松松的实现。


1.阴影效果的绘制方式

    在绘制阴影效果的时候,需要使用Canvas的多个属性配合才能够完成,例如设置阴影的模糊级数shadowBlur,设置形状与阴影的水平距离shadowOFFsetX,设置形状与阴影的垂直距离shadowOFFsetY,设置阴影的颜色shadowColor。当然了,还要绘制一个形状来显示该形状的阴影?;嬷普叫我跤暗拇胧纠缤妓荆?/P>在HTML5中阴影的绘制代码示例

    在谷歌浏览器中预览效果如图:

在HTML5中阴影的绘制效果预览


2.透明效果的绘制方式

    在Canvas中绘制重叠图形时,主要通过设置globalAlpha属性来控制重叠图形的透明度,该值介于0和1之间,0表示完全透明。在下面的示例图中一共绘制了三个矩形框,其中两个半透明,另外一个则完全不透明,如图:

在HTML5中透明效果的绘制代码示例

    在谷歌浏览器中预览效果如图:

在HTML5中透明效果的绘制预览


    本次的在HTML5中利用Canvas绘制阴影和透明效果的方法就是这些内容了,了解更多精彩资讯和丰富内容请添加我们的官方微信:pyyuanxing。谢谢大家的观看。祝大家:身体健康、生活愉快!

学营销送淘宝大优惠活动!    限20名! 报名从速。

      友情链接

  1. 办公文秘
  2. 美术培训
  3. 营销就业班
  4. 资料下载
  5. 学员作品
  6. 联系方式
  7. site map

地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   
电话: 020-84829690   咨询QQ:522961923  福建31选7开奖时间 
咨询微信:18926224142   微信公众号:新川教育
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6

  • 临汾市脑卒中急救溶栓地图发布 2018-08-22
  • 少1人战世界杯!克罗地亚锋霸确认被开除 2018-08-22
  • 莎拉-布莱曼新专辑《追梦人》发行 打造奇妙视听盛宴 2018-08-15
  • 《中国教育报》电子版 2018-08-15
  • 人民网评:别再让“600瓶白酒”恶化政治生态 2018-08-12
  • 游戏代练在网吧里卖淫秽视频 被警方逮个正着 2018-08-12
  • 尼玛嘉措:红军走过的地方 2018-07-30
  • 有事没事扎针灸?别这样养生 2018-07-30
  • 延安时期中共领袖红色家风建设研究 2018-07-16
  • 河南宝丰:一位乡村工匠的“汝瓷梦” 2018-07-16
  • 967| 468| 479| 772| 697| 896| 583| 374| 296| 358|