知识点
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
目标图像完全不显示 source-out
5. 下面展示 lighter 显示源图像 + 目标图像的情况
-
下面展示copy 只展示源图像,忽略目标图像的情况
-
下面演示 xor 使用异或操作对源图像与目标图像进行组合。
下面两种实用性较低,大家了解即可;