楔子
在之前的一个轨道交通可视化项目中，运用到了很多绘制技巧。可以参考 之前的一篇文章 《利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果》
效果图中的轨道，就同时存在外发光和内发光效果的效果。
外发光效果
我们知道外发光效果是很容易实现的，直接通过设置阴影效果即可达到。比如我们随便绘制一条线段，加上阴影效果，看起来就是外发光的效果：
1 ctx.clearRect(0,0,canvas.width,canvas.height); 2 ctx.shadowBlur= 20; 3 ctx.shadowOffsetX = 0; 4 ctx.shadowOffsetY = 0; 5 ctx.shadowColor="red"; 6 ctx.lineCap = "round"; 7 ctx.lineJoin = "round"; 8 ctx.lineWidth = 10; 9 ctx.strokeStyle = "blue"; 10 ctx.beginPath(); 11 ctx.moveTo(300,300); 12 ctx.lineTo(750,300); 13 ctx.quadraticCurveTo(800,300,800,350); 14 ctx.lineTo(800,450); 15 ctx.quadraticCurveTo(800,500,750,500); 16 ctx.lineTo(300,500); 17 ctx.stroke();
效果图如下：
如果绘制圆形效果如下：
上面的代码都容易理解，就是通过shadowBlur产生渐变阴影的效果。默认的阴影，我们称之为外阴影，意思都是图像向往展开的阴影效果。
内阴影
接下来的问题可能就变得有点难度。如果我们需要如下的一个内阴影的效果呢？
有人说，简单，一个渐变就搞定了。那再看看下面这个图像呢？
还是没问题，还是可以通过渐变来搞定，只是渐变的stop设置要麻烦一点罢了。如果在复杂一些的图形呢，比如下面的线段效果：
对于上面的线段的内阴影效果，就很难使用简单的渐变来实现了。
如何绘制内阴影效果
要实现上面的内阴影效果，首先还是使用shadowBlur参数，然后把ctx的globalCompositeOperation参数设置为“source-out” 即可。试试如下代码：
1 ctx.globalCompositeOperation = 'source-out'; 2 ctx.beginPath(); 3 ctx.beginPath(); 4 ctx.moveTo(300,300); 5 ctx.lineTo(750,300); 6 ctx.quadraticCurveTo(800,300,800,350); 7 ctx.lineTo(800,450); 8 ctx.quadraticCurveTo(800,500,750,500); 9 ctx.lineTo(300,500); 10 ctx.lineCap = "round"; 11 ctx.shadowBlur =15; 12 ctx.lineWidth = 20; 13 ctx.shadowColor="blue"; 14 ctx.fillStyle = 'red'; 15 ctx.strokeStyle = 'red'; 16 ctx.stroke();
最终绘制的效果就是上面的线段图的效果：
同时绘制内外阴影效果
如果修改globalCompositeOperation为“xor”，我们还可以得到既有内阴影又有外阴影的效果。代码如下：
1 ctx.globalCompositeOperation = 'xor'; 2 ctx.beginPath(); 3 ctx.beginPath(); 4 ctx.moveTo(300,300); 5 ctx.lineTo(750,300); 6 ctx.quadraticCurveTo(800,300,800,350); 7 ctx.lineTo(800,450); 8 ctx.quadraticCurveTo(800,500,750,500); 9 ctx.lineTo(300,500); 10 ctx.lineCap = "round"; 11 ctx.shadowBlur =15; 12 ctx.lineWidth = 20; 13 ctx.shadowColor="red"; 14 ctx.fillStyle = 'red'; 15 ctx.strokeStyle = 'red'; 16 ctx.stroke();
绘制的效果如下：
内阴影的缺陷
上述方法实现的内阴影颜色的颜色只能和绘制主体一样的颜色，而不能像外阴影的颜色一样，可以自由定义。比如把上述代码中的shadowColor改成blue，只有外阴影的颜色改变了：
1 ctx.globalCompositeOperation = 'xor'; 2 ctx.beginPath(); 3 ctx.beginPath(); 4 ctx.moveTo(300,300); 5 ctx.lineTo(750,300); 6 ctx.quadraticCurveTo(800,300,800,350); 7 ctx.lineTo(800,450); 8 ctx.quadraticCurveTo(800,500,750,500); 9 ctx.lineTo(300,500); 10 ctx.lineCap = "round"; 11 ctx.shadowBlur =15; 12 ctx.lineWidth = 20; 13 ctx.shadowColor="red"; 14 ctx.fillStyle = 'red'; 15 ctx.strokeStyle = 'red'; 16 ctx.stroke();
最终的效果如下图所示：
从图上可以看出只有外阴影颜色改变了，内阴影使用的本体的颜色。
实现闪烁的效果
基于上面的实现，我们可以实现一个阴影闪烁的效果，只需要不断更改shadowBlur的值，代码如下：
···
setInterval(()=>{
xor();
},10)
1let shadowBlur = 5; 2let offset = 0.5; 3 4 5 6function xor(){ 7 ctx.clearRect(0,0,canvas.width,canvas.height); 8 ctx.globalCompositeOperation = 'xor'; 9 ctx.shadowBlur= shadowBlur; 10 ctx.shadowOffsetX = 0; 11 ctx.shadowOffsetY = 0; 12 ctx.shadowColor="red"; 13 ctx.lineCap = "round"; 14 ctx.lineJoin = "round"; 15 ctx.lineWidth = 10; 16 ctx.strokeStyle = "blue"; 17 ctx.beginPath(); 18 ctx.moveTo(300,300); 19 ctx.lineTo(750,300); 20 ctx.quadraticCurveTo(800,300,800,350); 21 ctx.lineTo(800,450); 22 ctx.quadraticCurveTo(800,500,750,500); 23 ctx.lineTo(300,500); 24 ctx.stroke(); 25 // ctx.stroke(); 26 27 ctx.globalCompositeOperation = 'xor'; 28 ctx.shadowBlur=shadowBlur / 10.0; 29 ctx.shadowOffsetX=0; 30 ctx.shadowOffsetY=0; 31 ctx.shadowColor="blue"; 32 ctx.lineWidth =1; 33 // ctx.stroke(); 34 35 shadowBlur += offset; 36 if(shadowBlur > 15 || shadowBlur < 1){ 37 offset *= -1; 38 } 39}
···
如果做一些叠加绘制，还可以实现如下效果：
1 function xor(){ 2 ctx.clearRect(0,0,canvas.width,canvas.height); 3 ctx.globalCompositeOperation = 'xor'; 4 ctx.shadowBlur= shadowBlur; 5 ctx.shadowOffsetX = 0; 6 ctx.shadowOffsetY = 0; 7 ctx.shadowColor="red"; 8 ctx.lineCap = "round"; 9 ctx.lineJoin = "round"; 10 ctx.lineWidth = 20; 11 ctx.strokeStyle = "red"; 12 ctx.beginPath(); 13 ctx.moveTo(300,300); 14 ctx.lineTo(750,300); 15 ctx.quadraticCurveTo(800,300,800,350); 16 ctx.lineTo(800,450); 17 ctx.quadraticCurveTo(800,500,750,500); 18 ctx.lineTo(300,500); 19 ctx.stroke(); 20 // ctx.stroke(); 21 22 ctx.globalCompositeOperation = 'destination-out'; 23 ctx.shadowBlur=shadowBlur / 10.0; 24 ctx.shadowOffsetX=0; 25 ctx.shadowOffsetY=0; 26 ctx.shadowColor="red"; 27 ctx.lineWidth =5; 28 ctx.stroke(); 29 30 shadowBlur += offset; 31 if(shadowBlur > 15 || shadowBlur < 1){ 32 offset *= -1; 33 } 34 }
结语
至此文章已经到达尾声，我们可以总结一下绘制内阴影效果所用到的技术点
- CanvasRenderingContext2D.globalCompositeOperation
- CanvasRenderingContext2D.shadowBlur
其中globalCompositeOperation是一个有意思的属性，通过设置不同的参数，可以实现很多不同的效果。比如如下的效果就用到了这个属性：
image.png
