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次之间就能够达到较好的效果吧。

相关文章
|
5月前
|
存储 编解码 算法
第5章-着色基础-5.4-锯齿和抗锯齿
第5章-着色基础-5.4-锯齿和抗锯齿
50 1
|
5月前
|
机器学习/深度学习
第5章-着色基础-5.2-光源
第5章-着色基础-5.2-光源
35 0
|
6月前
|
前端开发
|
7月前
|
前端开发
canvas图像阴影处理
canvas图像阴影处理
【Three.js入门】灯光与阴影、平行光阴影属性、聚光灯的属性和应用
【Three.js入门】灯光与阴影、平行光阴影属性、聚光灯的属性和应用
374 1
【Three.js入门】标准网格材质、置换贴图、粗糙度贴图、金属贴图、法线贴图
【Three.js入门】标准网格材质、置换贴图、粗糙度贴图、金属贴图、法线贴图
502 0
【Three.js入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度
【Three.js入门】纹理及其常用属性、透明纹理、环境遮挡贴图与强度
567 0
效果处理(内阴影、外阴影、外发光、内发光、投影)
效果处理(内阴影、外阴影、外发光、内发光、投影)
效果处理(内阴影、外阴影、外发光、内发光、投影)
|
前端开发 JavaScript
canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备
canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备
931 0
|
API
使用Threejs创建几何体并添加材质、光源、阴影、动画,添加坐标轴
使用Threejs创建几何体并添加材质、光源、阴影、动画,添加坐标轴
492 0
使用Threejs创建几何体并添加材质、光源、阴影、动画,添加坐标轴