动画效果之 Canvas学习-globalCompositeOperation详解

忘是亡心i 2023-06-08 06:43 162阅读 0赞

本节介绍一下globalCompositeOperation，以的形式说明每个属性。  
globalCompositeOperation与cilp（）的区别：  
globalCompositeOperation用于控制源图像在目标图像上的显示方式。

*  源图像: 指你准备绘制到画布上的图像
 *  目标图像：在画布上已经绘制的图像

clip() 方法从原始画布中剪切任意形状和尺寸。

*  提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

### 图像合成globalCompositeOperation类型 ###

在Canvas中globalCompositeOperation属性的值总共有26种类型，每种类型都将前生不一样的效果，当然你可能看到效果都将不样，甚至有一些效果在浏览器中并不能正常的渲染。不过不要紧，我们简单的了解这26种类型其代表的含意以及产生的效果。  
今天我们就来了解Canvas中的图像合成怎么使用。

<table>  蓝色区域为旧图形（目标图像），红色为新图形（源图像）  
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>source-over<br>预设值。将新图形放在旧图形之上。</td> 
   <td> <img src="https://img-blog.csdnimg.cn/20191018082416367.png" width="    "></td> 
   <td>destination-over<br>将新图形放在旧图形之下。</td> 
   <td> <img src="https://img-blog.csdnimg.cn/20191018082651676.png" width="    "></td> 
  </tr> 
  <tr> 
   <td>source-in<br>只保留新、旧图片重叠的新圆形区域，其余透明。 </td> 
   <td> <img src="https://img-blog.csdnimg.cn/20191018082659274.png" width="    "></td> 
   <td>destination-in<br>只保留新、旧图片重叠的新圆形区域，其余透明。</td> 
   <td> <img src="https://img-blog.csdnimg.cn/20191018082703537.png" width="    "></td> 
  </tr> 
  <tr> 
   <td>source-out<br>只保留新、旧图像的非重叠的新圆形区域，其余为透明。 </td> 
   <td> <img src="https://img-blog.csdnimg.cn/20191018082708269.png" width="    "></td> 
   <td>destination-out<br>只保留新、旧图像的非重叠的旧圆形区域，其余为透明。 </td> 
   <td> <img src="https://img-blog.csdnimg.cn/20191018082721196.png" width="    "></td> 
  </tr> 
  <tr> 
   <td>source-atop<br>新圆形只在绘制新、旧图像重叠的新圆形区域，然后盖在旧图形之上 </td> 
   <td> <img src="https://img-blog.csdnimg.cn/20191018082725618.png" width="    "></td> 
   <td>destination-atop<br>旧图形只保留在新、旧图形重叠的旧圆形区域，然后盖在新圆形之上。 </td> 
   <td> <img src="https://img-blog.csdnimg.cn/20191018082729904.png" width="    "></td> 
  </tr> 
  <tr> 
   <td>lighter<br>新旧图像重叠区域的颜色，有新、旧图像的颜色吗相加而得 </td> 
   <td> <img src="https://img-blog.csdnimg.cn/20191018082732979.png" width="    "></td> 
   <td>xor<br>新旧图像重叠区域设为透明 </td> 
   <td> <img src="https://img-blog.csdnimg.cn/20191018082736851.png" width="    "></td> 
  </tr> 
  <tr> 
   <td>copy<br>移除其他图像，只保留新图形 </td> 
   <td> <img src="https://img-blog.csdnimg.cn/20191018082742618.png" width="    "></td> 
   <td> </td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 2][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 3][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 4][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 5][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 6][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 7][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 8][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 9][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 10][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191017142758738.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191017142823308.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191017142859734.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191017143437116.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191017143441122.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191017143444568.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191017143450190.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191017143456816.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191017143501670.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191017143506804.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70 10]: /images/20230531/cdd5045ed27347e2bb5e9ff610df7a63.png