广东 广州     专业、实战网络营销培训、淘宝电商培训、电脑设计培训教程中心
2018年新春学费优惠及放假通知!
新川教育-专业的网络营销培训机构
网络营销培训咨询提示
面授+在线教育+视频课程销售一体化.
网络营销选择培训班
绘制阴影和透明效果《HTML5系列教程20》

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

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

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

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


1.阴影效果的绘制方式

    在绘制阴影效果的时候,需要使用Canvas的多个属性配合才能够完成,例如设置阴影的模糊级数shadowBlur,设置形状与阴影的水平距离shadowOFFsetX,设置形状与阴影的垂直距离shadowOFFsetY,设置阴影的颜色shadowColor。当然了,还要绘制一个形状来显示该形状的阴影。绘制正方形阴影的代码示例如图所示:

在HTML5中阴影的绘制代码示例

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

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


2.透明效果的绘制方式

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

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

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

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


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

客服中心

点击这里给我发消息
黎老师

扫描添加微信号

广州新川教育微信号

展开客服

      友情链接

  1. 学校简介
  2. 资料下载
  3. 开班信息
  4. 学员作品
  5. 学校图片
  6. 师资介绍
  7. 资料下载
  1. 工作推荐
  2. CAD培训
  3. 平面设计
  4. 室内设计
  5. 办公文秘
  6. 文秘教程
  7. 美术培训
  8. site map

地址: 广州市番禺区市桥街桥东路63号银座中心7楼全层(番禺中医院旁边,百德中心斜对面)   电话: 020-84829690   咨询QQ:522961923  点击这里给我发消息
(4,5,6B,8,10,12,13,160,147路公共汽车在番禺中医院站或百德商业中心站下车即到)
(3,11,18,22,22B,51B,92,96,97,99,100,102,105,141,148,149,150,150B,303,309,310路公共汽车在交通大厦站下车,向番禺中医院方向走大约200米即到。)
1,20,20B,9路公共汽车到市桥大桥北站下车,向番禺中医院方向走100米左右即到。)
Copyright 2005-2020广州新川教育 All rights reserved.粤ICP备11014454号-6