html5 合成详解

缺乏、安全感 2022-04-25 08:30 122阅读 0赞

这篇文章主要说明一下html5中 **合成** 的使用方法

先把公有部分的代码放出来，规定之后的代码块默认之前都有的代码

<canvas width='500' height='500'></canvas>

// javaScript
    const oC = document.querySelector('canvas')
    const ctx = oC.getContext( "2d" )

# 合成的两个操作 #

1. globalAlpha      设置或返回绘图的当前 alpha 或透明值

2.globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上

### 例子 ###

先说一下**globalAlpha**

其默认值为1，然而要对某图样设置透明度时其要放在该图样的前面

ctx.globalAlpha = .2
    ctx.beginPath();
    ctx.fillStyle = 'blue'
    ctx.arc( 200,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()
    console.log(ctx.globalAlpha)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70][]

而**globalCompositeOperation**类似，可以放在任意位置输出，其默认值是"**source-over**"

## 接下来详细说一下 **globalCompositeOperation **的操作 ##

**source-over **       默认  在**目标图像**上显示**源图像**

ctx.beginPath();
    ctx.fillStyle = 'blue'
    ctx.arc( 200,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()
    
    ctx.globalCompositeOperation = "source-over"
    
    ctx.beginPath();
    ctx.fillStyle = 'red'
    ctx.arc( 250,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 1][]

从效果图可以看出蓝色圆是目标图像，红色圆是源图像

由此可以得出结论，**先写的图像**为**目标图像**，**后写的图像**为**源图像**

**source-atop        在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的**

ctx.beginPath();
    ctx.fillStyle = 'blue'
    ctx.arc( 200,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()
    
    ctx.globalCompositeOperation = "source-atop"
    
    ctx.beginPath();
    ctx.fillStyle = 'red'
    ctx.arc( 250,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 2][]

PS：注意这里的顶部是指在 从屏幕往你指向 的方向上更靠近你的位置，而不是屏幕的上下左右 ，我刚刚学到的时候就以为是屏幕的上下左右，希望你们不要犯一样的错误

**source-in  **      在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的

ctx.beginPath();
    ctx.fillStyle = 'blue'
    ctx.arc( 200,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()
    
    ctx.globalCompositeOperation = "source-in"
    
    ctx.beginPath();
    ctx.fillStyle = 'red'
    ctx.arc( 250,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 3][]

**source-out **       在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的

ctx.beginPath();
    ctx.fillStyle = 'blue'
    ctx.arc( 200,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()
    
    ctx.globalCompositeOperation = "source-out"
    
    ctx.beginPath();
    ctx.fillStyle = 'red'
    ctx.arc( 250,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 4][]

**destination-over**    在源图像上方显示目标图像

ctx.beginPath();
    ctx.fillStyle = 'blue'
    ctx.arc( 200,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()
    
    ctx.globalCompositeOperation = "destination-over"
    
    ctx.beginPath();
    ctx.fillStyle = 'red'
    ctx.arc( 250,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 5][]

注意和 **source-over** 效果的对比

**destination-atop**    在源图像顶部显示目标图像，源图像之外的目标图像部分不会被显示

ctx.beginPath();
    ctx.fillStyle = 'blue'
    ctx.arc( 200,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()
    
    ctx.globalCompositeOperation = "destination-atop"
    
    ctx.beginPath();
    ctx.fillStyle = 'red'
    ctx.arc( 250,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 6][]

注意和 **source-atop** 的对比

**destination-in **       在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的

ctx.beginPath();
    ctx.fillStyle = 'blue'
    ctx.arc( 200,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()
    
    ctx.globalCompositeOperation = "destination-in"
    
    ctx.beginPath();
    ctx.fillStyle = 'red'
    ctx.arc( 250,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 7][]

注意和 **source-in** 的对比

**destination-out**        在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的

ctx.beginPath();
    ctx.fillStyle = 'blue'
    ctx.arc( 200,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()
    
    ctx.globalCompositeOperation = "destination-out "
    
    ctx.beginPath();
    ctx.fillStyle = 'red'
    ctx.arc( 250,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 8][]

注意和 **source-out **的对比

**lighter **               显示源图像 + 目标图像

ctx.beginPath();
    ctx.fillStyle = 'blue'
    ctx.arc( 200,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()
    
    ctx.globalCompositeOperation = "lighter"
    
    ctx.beginPath();
    ctx.fillStyle = 'red'
    ctx.arc( 250,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 9][]

从效果图可以看出，两图像重叠的地方会进行颜色的叠加

**copy **               显示源图像  忽略目标图像

ctx.beginPath();
    ctx.fillStyle = 'blue'
    ctx.arc( 200,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()
    
    ctx.globalCompositeOperation = "copy"
    
    ctx.beginPath();
    ctx.fillStyle = 'red'
    ctx.arc( 250,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 10][]

**xor **                   使用异或操作对源图像与目标图像进行组合

ctx.beginPath();
    ctx.fillStyle = 'blue'
    ctx.arc( 200,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()
    
    ctx.globalCompositeOperation = "xor"
    
    ctx.beginPath();
    ctx.fillStyle = 'red'
    ctx.arc( 250,200,100,0,6.3,false )
    ctx.fill()
    ctx.closePath()

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 11][]

这个可能比较难理解，我稍稍解释一下

首先简单说一下异或是怎么操作的  
0⊕0=0，1⊕0=1，0⊕1=1，1⊕1=0（同为0，异为1）

类比一下，在这里两图像重叠的地方消失，只显示不重叠的部分~~

最后汇总一下所有 **globalCompositeOperation **的操作

globalAlpha      设置或返回绘图的当前 alpha 或透明值  
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上

source-over        默认  在目标图像上显示源图像  
source-atop        在目标图像顶部显示源图像  源图像位于目标图像之外的部分是不可见的  
source-in        在目标图像中显示源图像  只有目标图像内的源图像部分会显示，目标图像是透明的  
source-out        在目标图像之外显示源图像  只会显示目标图像之外源图像部分，目标图像是透明的  
destination-over    在源图像上方显示目标图像  
destination-atop    在源图像顶部显示目标图像  源图像之外的目标图像部分不会被显示  
destination-in        在源图像中显示目标图像  只有源图像内的目标图像部分会被显示，源图像是透明的  
destination-out        在源图像外显示目标图像  只有源图像外的目标图像部分会被显示，源图像是透明的  
lighter                显示源图像 + 目标图像  
copy                显示源图像。忽略目标图像  
xor                    使用异或操作对源图像与目标图像进行组合

--------------------

好了，关于html5的合成就讲这么多了，这篇文章只讲了实现效果，具体要怎么应用到实际中还是要靠平时多看案例，多思考

希望这篇文章对你有帮助！

Wish you godspeed!

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70]: /images/20220125/8fc6b9e2606143238c41b4b4ef450126.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 1]: /images/20220125/d3da80179d034d949e6e9a64f5f4a8fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 2]: /images/20220125/ce2f05a5470340cfa46fed31e7029d92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 3]: /images/20220125/b85637690a644bf6b5a02dd4493bde09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 4]: /images/20220125/47971bdb253c401cbb050604380f89b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 5]: /images/20220125/a94776a197cd413b90d5f1acf44f0aed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 6]: /images/20220125/95efa42d6f3440f981663fa76380c5d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 7]: /images/20220125/d50d21785ef84a2387b2fadeabdec737.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 8]: /images/20220125/e4ac4207e416427bb67bd9d3bd04a76c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 9]: /images/20220125/08d683c5c4fb48b18cf521d902adf9c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 10]: /images/20220125/63baae7522c84244875f5d3e90baa587.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RNX0dvZHNwZWVk_size_16_color_FFFFFF_t_70 11]: /images/20220125/6d16a22c47314dfbb0a332351c604bc0.png