canvas多重阴影发光效果实现


Posted in Javascript onApril 20, 2021

前言

在一个项目中,客户提了一个发光的效果,效果图如下:
 

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);

canvas多重阴影发光效果实现

简单的阴影效果下,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();

从代码中我们可以看出我们多次使用了阴影的绘制啊,最终的绘制效果如下图所示。

canvas多重阴影发光效果实现

从图中可以看出, 阴影有较好的扩散程度,也有较好的强烈度。

下面是用多重阴影实现的文字霓虹灯效果,同样可以看出有较好的发光效果。

canvas多重阴影发光效果实现

总结

可以看出要达到强烈的发光效果, 需要使用多重阴影功能。当然使用多种阴影也不是没有限制的, 因为阴影本身有很大的性能损耗。通过尝试我们发现一般3~5次之间就能够达到较好的效果吧。

到此这篇关于canvas多重阴影发光效果实现的文章就介绍到这了,更多相关canvas多重阴影发光内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
Javascript 相关文章推荐
javascript string字符串优化问题
Jul 31 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
通过实例了解js函数中参数的传递
Jun 15 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
JavaScript+HTML实现学生信息管理系统
浅谈vue2的$refs在vue3组合式API中的替代方法
JS实现简单控制视频播放倍速的实例代码
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 #Javascript
详解如何在Canvas中添加事件的方法
Apr 17 #Javascript
Canvas三种动态画圆实现方法说明(小结)
You might like
如何使用脚本模仿登陆过程
2006/11/22 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
js仿360开机效果
2019/12/26 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python制作简单的网页爬虫
2015/11/22 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
环境建设实施方案
2014/03/14 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers