canvas多重阴影发光效果
canvas多重阴影发光效果
前言
在一个项目中,客户提了一个发光的效果,效果图如下:
阴影
有的人可能会说,这个用阴影其实就可以实现。但是从图中可以看出,是一个比较强烈的发光效果。实际的应用过程中我们会发现用简单阴影参数实现的效果很难达到这样强烈的发光效果。
比如
ctx.shadowColor = 'rgba(255,0,0,1)';
ctx.shadowBlur =10;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillStyle = 'rgba(0,0,255,1.0)';
ctx.fillRect(100,100,200,100);
简单的阴影效果下,shadowBlur 表示阴影半径。当阴影半径比较大的时候,阴影的扩散程度会比较大,但阴影的强烈度不够。在阴影的半径比较小的时候,阴影的强烈度是够的,但阴影的扩散程度会比较小。
多重阴影
如何达到具有较强的阴影强度,又有较好的阴影扩散度呢?也就是实现这种比较强烈的发光效果。嗯,答案就是使用多重阴影效果。
所谓多重阴影效果,使用阴影效果对图形进行多次绘制,多次绘制的过程中,shadowBlur的值会不一样,这样可以形成多个阴影叠加的效果。
下面是一个简单的示例,代码如下。
ctx.shadowColor = 'rgba(255,255,0,1)';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 10100;
ctx.shadowOffsetY = 10100;
ctx.beginPath();
ctx.fillStyle = 'rgba(0,0,255,1.0)';
ctx.arc(-10000, -10000, 50, 0, Math.PI * 2);
ctx.fill();
ctx.shadowColor = 'rgba(255,0,0,1)';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 10100;
ctx.shadowOffsetY = 10100;
ctx.beginPath();
ctx.fillStyle = 'rgba(0,0,255,1.0)';
ctx.arc(-10000, -10000, 30, 0, Math.PI * 2);
ctx.fill();
从代码中我们可以看出我们多次使用了阴影的绘制啊,最终的绘制效果如下图所示。
从图中可以看出, 阴影有较好的扩散程度,也有较好的强烈度。
下面是用多重阴影实现的文字霓虹灯效果,同样可以看出有较好的发光效果。
总结
可以看出要达到强烈的发光效果, 需要使用多重阴影功能。当然使用多种阴影也不是没有限制的, 因为阴影本身有很大的性能损耗。通过尝试我们发现一般3~5次之间就能够达到较好的效果吧。
关注公众号“ITMan彪叔” 可以及时收到更多有价值的文章。另外如果对可视化感兴趣,可以和我交流,微信541002349.
canvas多重阴影发光效果的更多相关文章
- canvas绘制图像轮廓效果
在2d图形可视化开发中,经常要绘制对象的选中效果. 一般来说,表达对象选中可以使用边框,轮廓或者发光的效果. 发光的效果,可以使用canvas的阴影功能,比较容易实现,此处不在赘述. 绘制边框 绘制 ...
- CSS3字体发光效果
text-shadow 该属性为文本添加阴影效果 text-shadow: h-shadow v-shadow blur color; h-shadow: 水平阴影的位置(阴影水平偏移量),可为负值, ...
- [UWP]用Win2D和CompositionAPI实现文字的发光效果,并制作动画
1. 成果 献祭了周末的晚上,成功召唤出了上面的番茄钟.正当我在感慨"不愧是Shadow大人,这难道就是传说中的五彩斑斓的黑?" "那才不是什么阴影效果,那是发光效果.& ...
- C# vb .net实现发光效果
在.net中,如何简单快捷地实现Photoshop滤镜组中的发光效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...
- CSS3样式_实现字体发光效果
text-shadow 属性仅仅是用来设置文本阴影的,似乎并不能实现字体发光效果.其实不然,这正是 text-shadow 属性的精妙之处.当阴影的水平偏移量和垂直偏移量都为0时,阴影就和文本重合了. ...
- 酷!使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客
Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客 Canvas之动态波浪效果 (2012-04-26 09:04:51) 转载▼
- canvas动态小球重叠效果
前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...
随机推荐
- Vue--子组件互相传值,子组件来回传值,传值反复横跳
Vue--子组件传值,子组件来回传值,子组件传值反复横跳 我不不仅要子组件之间直接传值,我还要传过去再传回来,传回来再传过去,子组件直接反复横跳 解决问题 给组件传值,并不知道改值的校验结果 同一个组 ...
- 10分钟快速入门vue.js
Vue.js是一个轻巧.高性能.可组件化的MVVM库,一套用于构建用户界面的渐进式框架,上手简单,兼容强大. 官方文档:https://cn.vuejs.org/v2/guide/ 下面我们就直接来使 ...
- sql注入之双查询注入
双查询注入前需要了解什么是子查询 子查询可以理解在一个select语句中再插入一个select 里面的select语句就是子查询 例子:select concat((select database() ...
- Linux安装Mysql8.0.11
0. 安装环境 1. 下载安装包 方式一:百度网盘下载 链接:https://pan.baidu.com/s/11t_JXUp-SXRaioNDvdltNg 提取码:uzyj 方式二:在线下载 1 ...
- html2canvas使用心得
近两年做了几次微信H5活动的开发,为了达到传播分享的效果,通常最终都需要生成个性化的图片,供用户长按保存分享,在这里就把自己的一些使用心得记录下来,供其他小伙伴借鉴. 这里备注一下,我目前用的是 h ...
- 容器服务 TKE 存储插件与云硬盘 CBS 最佳实践应用
引言 随着自研上云的深入,越来越多的有状态服务对于在 TKE 集群中使用云上存储能力的需求也越来越强烈. 目前腾讯云容器服务 TKE(Tencent Kubernetes Engine已支持在 TKE ...
- node目录
1 [了解nodejs] 1.1 [node简介] 1.2 [node的特点] 1.3 [如何安装] 1.4 [如何运行] 2 [es6--基本语法] 2.1 [变量的解构赋值] 2.2 [解构赋值] ...
- mini-web框架-装饰器-总结1(5.3.1)
@ 目录 1.说明 2.代码 关于作者 1.说明 原则:开放封闭 可以扩展,但是不可以修改.也就是说软件对扩展开放,对修改关闭. 运用技术:闭包 一共两种方法,一个使用闭包,一个使用类 使用多个装饰器 ...
- yii\filters\AccessControl 访问权限控制
Class yii\filters\AccessControl 所有类 | 属性 | 方法 继承 yii\filters\AccessControl » yii\base\ActionFilter ...
- C#中获取DataTable某一列的值转换为集合
直接使用 //Linqvar l1 = (from d in dt.AsEnumerable() select d.Field<int>("ID")).ToList() ...