返回

层叠的奥妙：canvas 的 globalCompositeOperation

前端

利用 Canvas 的 globalCompositeOperation 属性释放创意

简介

Canvas 的 globalCompositeOperation 属性就像一块画布上的调色板，为我们提供了一系列选项，让新绘制的内容与当前画布元素相互作用，创造出引人注目的效果。通过了解其不同值，我们可以开启一个创意的新世界。

常见的值

  • source-over： 默认值，叠加新内容到现有画布内容之上。
  • source-in： 仅显示新内容与现有画布内容重叠的部分。
  • source-out： 仅显示新内容与现有画布内容不重叠的部分。
  • destination-over： 叠加现有画布内容到新内容之上。
  • destination-in： 仅显示现有画布内容与新内容重叠的部分。
  • destination-out： 仅显示现有画布内容与新内容不重叠的部分。
  • lighter： 混合新内容和现有画布内容，使颜色更亮。
  • darker： 混合新内容和现有画布内容，使颜色更暗。
  • copy： 直接将新内容复制到现有画布上。
  • xor： 对新内容和现有画布内容执行异或运算，产生闪烁效果。

创意应用

刮刮卡效果

使用 source-out 值，我们可以创建一种刮刮卡效果。首先，在画布上绘制一层背景，然后创建一个黑色刮刮卡区域。最后，设置 globalCompositeOperation 为 source-out，并在刮刮卡区域绘制内容。刮开区域时，隐藏的内容就会显现。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 创建背景
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 500, 500);

// 创建刮刮卡区域
ctx.fillStyle = "black";
ctx.fillRect(100, 100, 200, 200);

// 设置 globalCompositeOperation
ctx.globalCompositeOperation = "source-out";

// 绘制内容
ctx.fillStyle = "white";
ctx.fillRect(150, 150, 100, 100);

图像叠加

globalCompositeOperation 属性可用于叠加图像。首先，在两个画布上加载两张图像。然后，将画布叠加在一起，并将 globalCompositeOperation 设置为 source-over。两张图像就会融合在一起。

const canvas1 = document.getElementById("canvas1");
const ctx1 = canvas1.getContext("2d");
const canvas2 = document.getElementById("canvas2");
const ctx2 = canvas2.getContext("2d");

// 加载图像
const image1 = new Image();
image1.src = "image1.jpg";
const image2 = new Image();
image2.src = "image2.jpg";

// 绘制图像
ctx1.drawImage(image1, 0, 0);
ctx2.drawImage(image2, 0, 0);

// 叠加画布
ctx1.globalCompositeOperation = "source-over";
ctx1.drawImage(canvas2, 0, 0);

创建蒙版

使用 globalCompositeOperation 属性可以创建蒙版。首先，在画布上创建一个蒙版。然后，创建一个内容图层并将其填充为黑色。最后，将 globalCompositeOperation 设置为 destination-in，并将内容图层叠加到蒙版上。内容图层只会显示在蒙版上。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 创建蒙版
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, 500, 500);

// 创建内容图层
const content = document.createElement("canvas");
const contentCtx = content.getContext("2d");
contentCtx.fillStyle = "black";
contentCtx.fillRect(0, 0, 500, 500);

// 设置 globalCompositeOperation
ctx.globalCompositeOperation = "destination-in";

// 叠加内容图层
ctx.drawImage(content, 0, 0);

结语

Canvas 的 globalCompositeOperation 属性为我们在数字画布上尽情挥洒创造力提供了无限可能。无论是创建刮刮卡效果、叠加图像还是制作蒙版，它的强大功能都能助我们一臂之力。掌握这些值，释放你的艺术才华，探索创意表达的新领域。

常见问题解答

  1. 什么是 globalCompositeOperation 属性？
    globalCompositeOperation 属性定义了新绘制内容与当前画布内容的融合方式。

  2. 默认的 globalCompositeOperation 值是什么？
    默认值为 "source-over"，它将新内容叠加到现有画布内容之上。

  3. 如何使用 globalCompositeOperation 创建刮刮卡效果？
    使用 "source-out" 值，在刮刮卡区域绘制黑色矩形，并将内容图层叠加到上面。

  4. 如何在 Canvas 上叠加图像？
    将两个画布上的图像绘制在一起，并将 globalCompositeOperation 设置为 "source-over"。

  5. 如何使用 globalCompositeOperation 创建蒙版？
    创建一个蒙版，在黑色内容图层上设置 globalCompositeOperation 为 "destination-in"，然后将内容图层叠加到蒙版上。