canvas多重阴影发光效果

简介: canvas多重阴影发光效果

canvas多重阴影发光效果


前言


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


微信图片_20220425134113.png


阴影


有的人可能会说,这个用阴影其实就可以实现。但是从图中可以看出,是一个比较强烈的发光效果。实际的应用过程中我们会发现用简单阴影参数实现的效果很难达到这样强烈的发光效果。


比如


1ctx.shadowColor = 'rgba(255,0,0,1)';
2  ctx.shadowBlur =10;
3  ctx.shadowOffsetX = 10;
4  ctx.shadowOffsetY = 10;
5
6  ctx.fillStyle = 'rgba(0,0,255,1.0)';
7  ctx.fillRect(100,100,200,100);


微信图片_20220425134118.png


简单的阴影效果下,shadowBlur 表示阴影半径。当阴影半径比较大的时候,阴影的扩散程度会比较大,但阴影的强烈度不够。在阴影的半径比较小的时候,阴影的强烈度是够的,但阴影的扩散程度会比较小。


多重阴影


如何达到具有较强的阴影强度,又有较好的阴影扩散度呢?也就是实现这种比较强烈的发光效果。嗯,答案就是使用多重阴影效果。


所谓多重阴影效果,使用阴影效果对图形进行多次绘制,多次绘制的过程中,shadowBlur的值会不一样,这样可以形成多个阴影叠加的效果。


下面是一个简单的示例,代码如下。


1ctx.shadowColor = 'rgba(255,255,0,1)';
 2  ctx.shadowBlur = 20;
 3  ctx.shadowOffsetX = 10100;
 4  ctx.shadowOffsetY = 10100;
 5
 6  ctx.beginPath();
 7  ctx.fillStyle = 'rgba(0,0,255,1.0)';
 8  ctx.arc(-10000, -10000, 50, 0, Math.PI * 2);
 9  ctx.fill();
10
11  ctx.shadowColor = 'rgba(255,0,0,1)';
12  ctx.shadowBlur = 20;
13  ctx.shadowOffsetX = 10100;
14  ctx.shadowOffsetY = 10100;
15
16  ctx.beginPath();
17  ctx.fillStyle = 'rgba(0,0,255,1.0)';
18  ctx.arc(-10000, -10000, 30, 0, Math.PI * 2);
19  ctx.fill();


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


微信图片_20220425134122.png


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


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


微信图片_20220425134125.png


总结


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

相关文章
|
前端开发 数据可视化 图形学
canvas中模拟光照效果——绿的你发慌
前言 可视化开发中,尤其是在2d视图下,看到一些非常的好玩的特效,五颜六色的光。好的本篇文章就带你去用canvas去模拟你自己想要的效果。涉及到一些数学知识,不过的都是基础的。我还是争取讲的更加通俗易懂一点。
canvas中模拟光照效果——绿的你发慌
|
前端开发 数据可视化
canvas可视化效果之内阴影效果
canvas可视化效果之内阴影效果
canvas可视化效果之内阴影效果
|
负载均衡 中间件 应用服务中间件
Koa.js 中的日志管理
本文总结了在 Koa.js 项目中使用第三方日志插件 log4js 的方法,首先是定义log4js的配置,它决定了该如何记录日志。然后在应用入口中使用 log4js,让其生效。
1025 0
|
9月前
|
XML Java API
poi-tl——Word模板生成器
poi-tl——Word模板生成器
|
移动开发 前端开发 API
HTML5 Canvas 实现简易 绘制音乐环形频谱图
参考资料:1.Web 技术研究所2.Web_Audio_API 0.启发 在B站我们有很多的小伙伴们应该都看到过用AE做的可视化音乐播放器播放音乐的视频,看着特别酷炫带感有木有。
3005 0
|
存储 JavaScript 前端开发
用js获取当前月份的天数
原文:用js获取当前月份的天数 在获取每月天数的时候,一般都是存储到一个数组中进行获取,但是如果是二月份的话就需要首先判断是否闰年,再确定是28还是29了。 js可以通过Date对象很方便的获取到每月的天数,在初始化Date对象时,我们可以通过这种方式 var d = new Date(2017,2,0); console.log(d.getDate()); 以上代码可以在控制台输出2015年2月份的天数 Date对象月份从0开始,即0表示1月份,以此类推。
3451 0
|
9月前
|
域名解析 缓存 网络协议
使用IP地址可以访问应用系统,但通过域名无法访问时
使用IP地址可以访问应用系统,但通过域名无法访问时
1250 1
|
安全 JavaScript 前端开发
JavaScript 中的模板字面量与标签模板
在 JavaScript 中,模板字面量(Template Literals)和标签模板(Tagged Templates)是两种用于处理字符串的特殊方式。它们分别提供了更灵活和强大的字符串处理能力,让字符串拼接、格式化和转义变得更加方便。
248 0
|
9月前
|
JSON 小程序 数据可视化
ec-canvas 在小程序上的使用(一)
ec-canvas 在小程序上的使用
|
人工智能
IDEA完全免费AI辅助编程插件BITO-GPT4安装及中文国产化设置
IDEA完全免费AI辅助编程插件BITO-GPT4安装及中文国产化设置
1250 1

热门文章

最新文章