HTML5中canvas的globalCompositeOperation属性

最新推荐文章于 2024-07-19 10:37:28 发布

Yannnnnm

最新推荐文章于 2024-07-19 10:37:28 发布

阅读量759

点赞数 1

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/Yannnnnm/article/details/109256793

版权

知识点

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。
我们首先要知道什么是目标图像和源图像

目标图像：画布上已经存在的图像
源图像:即将画到画布上的图像

属性值

‘source-over’ 重叠区域源图像在目标图像上
destination-over 重叠区域,源图像在目标图像下；
destination-atop 目标图像只显示重叠部分
source-atop 源图像只显示重叠部分
只展示源图像与目标图像重合部分
destination-in 只显示源图像重叠部分
source-in 只显示目标图像重叠部分
destination-out 在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。
source-out在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。
lighter 显示源图像 + 目标图像。
copy 显示源图像。忽略目标图像。
xor 使用异或操作对源图像与目标图像进行组合

代码演示

以下演示均是一个html,所以这里单独写出来，方便后续演示，避免大量重复

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       body {
           text-align: center;
       }
       canvas {
           border: 1px solid black;
       }
   </style>
</head>
<body>
   <canvas width="200" height="200"></canvas>
</body>
</html>

下面展示两种情况的演示

<script>
       window.onload = function() {
           var canvas = document.querySelector('canvas');
           var ctx = canvas.getContext('2d');
           ctx.beginPath(); //目标图像开始路径
           ctx.fillStyle = "#345678"
           ctx.rect(20, 20, 90, 90);
           ctx.fill(); //闭合
           // 源图像在目标图像上
           ctx.globalCompositeOperation = 'source-over';
           // 目标图像在源图像上
           // ctx.globalCompositeOperation = 'destination-over';
           ctx.beginPath(); //源图像 开始路径
           ctx.fillStyle = "red";
           ctx.arc(100, 100, 50, 0, Math.PI * 2);
           ctx.fill()
       }
   </script>

由于重复的代码太多下面一起展示

效果图展示

首先我们先看默认情况,下面我们看一下默认情况是下面的哪一种
在这里插入图片描述

第一组属性source-over,和destination-over
重叠部分源图像在目标图像上，我们发现和默认情况一样，那么这里我们可以发现globalCompositeOperation的默认值是source-over

重叠部分，目标图像在源图像上
第二组这里我们分别看一下source-atop，源图像只展现重复部分和destination-atop，目标图像只展示重叠部分
源图像只展示重叠部分

目标图像只展示重叠部分
第三组只展示源图像与目标图像重合部分 source-in，展示源图像重合部分，destination-in,展示目标图像重叠部分
展示源图像重合部分

展示目标图像重叠部分
在这里插入图片描述
4. 第四组，我们分别看一下对方完全透明的情况， destination-out 在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示， source-out在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示
源图像完全不显示 destination-out 在这里插入图片描述