canvas中globalCompositeOperation属性值所代表的的值表达含义及样式

最新推荐文章于 2024-08-10 18:44:14 发布

波塞西呀

最新推荐文章于 2024-08-10 18:44:14 发布

阅读量1.3k

点赞数 1

文章标签： canvas

本文链接：https://blog.csdn.net/qq_1307495/article/details/114836732

版权

CANVAS属性记录
 一：globalCompositeOperation的属性
CanvasRenderingContext2D.globalCompositeOperation Canvas 2D API的属性设置在绘制新形状时要应用的合成操作的类型。
1.1 Type类型
在这里插入图片描述

1.2 source-over
这是默认设置，并在现有画布内容的顶部绘制新形状
在这里插入图片描述

1.3 source-in
新图形仅在新图形和目标画布重叠的位置绘制。其他一切都是透明的。
在这里插入图片描述

	const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d');
    // xor:重叠部分空  lighter:重叠部分颜色是重组颜色 
    // destination-atop:切割颜色
    

    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 100, 100);
    ctx.globalCompositeOperation = 'source-in';
    ctx.fillStyle = 'red';
    ctx.fillRect(50, 50, 100, 100);

12.1 Source-out
新形状在不与现有画布内容重叠的位置绘制。
在这里插入图片描述

	ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 100, 100);
	ctx.globalCompositeOperation = 'source-out';
    ctx.fillStyle = 'red';
    ctx.fillRect(50, 50, 100, 100);

17.1 source-atop
新形状仅在与现有画布内容重叠的位置绘制。
在这里插入图片描述

	ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 100, 100);
     ctx.globalCompositeOperation = 'source-atop';
     ctx.fillStyle = 'red';
     ctx.fillRect(50, 50, 100, 100);

22.1 destination-over
在现有画布内容后面绘制新形状。
在这里插入图片描述

22.2 destination-in
现有画布内容保留在新形状和现有画布内容重叠的位置。其他一切都是透明的
在这里插入图片描述

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
 ctx.globalCompositeOperation = 'destination-in';
 ctx.fillStyle = 'red';
 ctx.fillRect(50, 50, 100, 100);