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 相关文章推荐
可以将word转成html的js代码
Apr 11 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
JavaScript 对象创建的3种方法
Nov 17 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
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
php实现点击可刷新验证码
2015/11/07 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
babel基本使用详解
2017/02/17 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python中正则的使用指南
2016/12/04 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
python可视化实现代码
2019/01/15 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
jupyter 导入csv文件方式
2020/04/21 Python
python中adb有什么功能
2020/06/07 Python
Python如何读取、写入JSON数据
2020/07/28 Python
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
历史系自荐信范文
2013/12/24 职场文书
简短证婚人证婚词
2014/01/09 职场文书
检查接待方案
2014/02/27 职场文书
全国文明单位申报材料
2014/05/31 职场文书
写字楼租赁意向书
2014/07/30 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers