| canvas图像重叠处理 | 您所在的位置：网站首页 › 两张图片如何覆盖文字 › canvas图像重叠处理 |
canvas图像重叠处理
|
图像重叠处理
在面对重叠的图层之后，所产生的应对手段。默认的方法就是新层覆盖旧层，但是为了更好地完成一些效果，所以就有了这个图像重叠处理。 关键代码globalCompositeOperation=type: 选择图像重叠的时候的处理方法。一旦设置之后全局生效，如果要改的话，就需要使用**ctx.restore()**或者手动调整为自己想要的属性值。 这个属性有很多的属性值：(下图的绘制过程均为先绘制粉色图片，再绘制蓝色图片) source-over: 默认值，新的图层覆盖老的图层 source-in: 显示新图层中的和旧图层的重叠的部分，其他透明。
11111111 11000000 00010100 00000000 00000000 11111111 通过逻辑或运算之后就是 11111111 11000000 11111111 重新转化为rgb值就是 （255， 192， 255） 如果您不信，也可以使用QQ的截图工具查看颜色编码 以上就是它的全部参数，囊括了所有对图层重叠时的处理方法，但比起使用哪种方法更重要的是怎么正确使用它。 window.onload = () => { let canvas = document.getElementById('demo') let ctx = canvas.getContext('2d') ctx.fillStyle = 'pink' ctx.fillRect(0, 0, 150, 150) ctx.globalCompositeOperation = 'xor' // 在绘制第一个图层和第二个图层之间使用它！！ ctx.fillStyle = 'blue' ctx.fillRect(100, 100, 150, 150) } 总结这个方法用来处理多图层之间的关系的，它可以承接更加复杂的图像处理。是不是更接近了PS呢？ |
source-out: 显示新的图层中没有重叠的部分,其他透明
source-atop: 显示新图层中 和老图层的重叠部分和老图层,其他透明。 
destination-over: 新的图层在老的图层下面 
destination-in: 显示老图层中 和新图层的重叠部分，其他透明 
destination-out: 显示老图层中没重叠的部分,其他透明 
destination-atop: 显示新的图层中没有重叠的部分和老图层中 和新图层重叠的部分 
lighter: 重叠部分进行颜色处理，先获取两个图层的Hex颜色代码，然后转化为二进制，接下来对两个颜色代码进行 逻辑或 运算，计算完之后再重新填充回原处。 下面的粉色区域rgb值为（255， 192， 203），蓝色区域的rgb值为（0， 0， 255）,转化为二进制分别为：
darken: 同理，只不过它使用 逻辑与 算法计算颜色代码。如果您学过计算机网络的话，就会对这两种算法有更深刻的了解！ 
copy: 只显示新的图层 
xor:显示新的图层和旧的图层，不显示重叠的图层。 
【本文地址】
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |