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 DOM学习第六章 表单实例
Feb 19 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
老生常谈ES6中的类
Jul 31 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
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
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
js中eval详解
2012/03/30 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
javascript 闭包详解
2015/02/15 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
JS执行控制之节流模式实例分析
2018/12/21 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python IDLE清空窗口的实例
2018/06/25 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
中科软测试工程师面试题
2012/06/16 面试题
航空大学应届生求职信
2013/11/10 职场文书
高中体育教学反思
2014/01/24 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
学前教育专业求职信
2014/09/02 职场文书
学校联谊协议书
2014/09/16 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
毕业生政审意见范文
2015/06/04 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
网吧管理制度范本
2015/08/05 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers