HTML5 Canvas如何设置阴影
来源:互联网 发布:c语言从入门到入坟 编辑:程序博客网 时间:2024/06/06 08:53
本人为原创作品:e良师益友 ,转载是并且注明
e良师益友网导读:HTML5 Canvas如何设置阴影,在网页设计中适当的加入一些特效,能让网页看上去更加的美观,带给客户更好的用户体验,在这里小编和大家分享HTML5 Canvas阴影使用方法,一起来学学吧!
HTML5 Canvas中提供了设置阴影的四个属性值分别为:
context.shadowColor = “red” 表示设置阴影颜色为红色
context.shadowOffsetX = 0表示阴影相对TEXT的水平距离,0表示两者水平位置重合
context.shadowOffsetY = 0表示阴影相对TEXT的垂直距离,0表示两者垂直位置重合
context.shadowBlur = 10 阴影模糊效果,值越大模糊越厉害。
一个最简单的带有阴影的矩形代码如下:
context.shadowColor = "RGBA(127,127,127,1)";
context.shadowOffsetX = 3;context.shadowOffsetY = 3;
context.shadowBlur = 0;
context.fillStyle = "RGBA(0, 0, 0, 0.8)";
context.fillRect(10, hh+10, 200,canvas.height/4-20);
效果如下:
阴影文字:只要设置shadowOffsetX与shadowOffsetY的值,当值都正数时,阴影相对文字的右下方偏 移。当值都为负数时,阴影相对文字的左上方偏移。
3D拉影效果:在同一位置不断的重复绘制文字同时改变shadowOffsetX、shadowOffsetY、shadowBlur 的值,从小到大不断偏移不断增加,透明度也不断增加。就得到了拉影效果文字。
边缘模糊效果文字:在3D拉影效果的基础上在四个方向重复,就得到了边缘羽化的文字效果。
运行效果:
0 0
- HTML5 Canvas如何设置阴影
- HTML5 Canvas阴影用法演示
- 关于HTML5 canvas 阴影效果
- html5 canvas学习--创建阴影
- HTML5阴影设置
- Html5 Canvas开发之插入图片、设置背景、渐变、文本、阴影
- Html5 Canvas初探学习笔记(8) -阴影
- Html5学习---------canvas阴影效果的显示
- HTML5 Canvas进阶(二):模式,组合,阴影,状态,变形
- 使用HTML5画布(canvas)生成阴影效果
- HTML5画布Canvas坐标轴转换、图案填充、渐变与阴影
- HTML5画布Canvas坐标轴转换、图案填充、渐变与阴影
- canvas阴影
- canvas 阴影
- 【html5】HTML5中canvas如何画虚线
- html5 canvas宽高属性设置
- html5 canvas学习--设置图形的透明度
- html5 Canvas 如何自适应屏幕大小
- 移动设备上的劝导式设计
- 2013级C++第1周(春)项目【项目1 - 用枚举表示对称方式】
- 非阻塞JavaScript脚本加载【优化网站】
- SQL中IN和EXISTS用法的区别
- VC中的文件后缀介绍
- HTML5 Canvas如何设置阴影
- 创业公司如何应对巨头--提防七种武器
- 在hbase0.96上部署opentsdb
- 手把手教你selenium_第一个脚本_登录新浪微博
- 纯洁之心灵盛满乐
- Oracle查看表空间大小和 使用率 (DBA 给的)
- 地产公司新建商业中心调研
- 分析一款帮你戒烟的App戒烟行动(kick it)
- oracle联机文档分类