Canvas进阶篇：路径裁剪clip详解-CSDN博客

本文链接：https://blog.csdn.net/wuhen_n/article/details/147957623

Canvas进阶篇：路径裁剪clip详解

前言
基本概念
语法说明
- clip()
- clip(fillRule)
简单裁剪
- 代码示例
- 效果预览
复杂路径裁剪
- 代码示例
- 效果预览
奇偶规则裁剪
- 代码示例
- 效果预览
结语

前言

在 Canvas 绘图中，路径裁剪clip允许我们定义一个区域，之后的绘图操作只会在这个区域内生效。与之前 globalCompositeOperation 属性作一比较，它可以实现与 source-in 和 source-atop差不多的效果。

基本概念

路径裁剪的核心思想是限制绘图区域。当我们调用clip()方法后，Canvas 会创建一个新的裁剪区域，这个区域由之前定义的路径决定。此后，任何绘图操作都只会在这个裁剪区域内显示，区域外的部分会被自动隐藏。

语法说明

clip()方法存在两种重载形式：clip()和clip(fillRule)：

clip()

将当前路径设置为裁剪区域。

clip(fillRule)

使用指定的填充规则创建裁剪区域，fillRule取值为nonzero或evenodd：

fillRule：非零环绕规则，默认规则，根据路径的方向计算区域是否被填充。
evenodd：奇偶规则，根据点被路径环绕的次数的奇偶性来判断是否填充。

简单裁剪

代码示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单裁剪示例</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script>
      // 获取Canvas元素和绘图上下文
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      // 绘制一个矩形路径
      ctx.rect(50, 50, 300, 100);
      // 将该路径设置为裁剪区域
      ctx.clip();

      // 在裁剪区域内绘制文本和图形
      ctx.fillStyle = 'blue';
      ctx.fillRect(0, 0, 400, 200); // 只有在裁剪区域内的部分可见

      ctx.fillStyle = 'white';
      ctx.font = '24px Arial';
      ctx.fillText('这是裁剪区域内的文本，其他文本不可见', 100, 100);
    </script>
  </body>
</html>

效果预览

简单裁剪示例

复杂路径裁剪

代码示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂路径裁剪示例</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script>
      // 获取Canvas元素和绘图上下文
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      // 创建一个圆形路径作为裁剪区域
      ctx.beginPath();
      ctx.arc(200, 100, 80, 0, Math.PI * 2);
      ctx.clip();

      // 在裁剪区域内绘制图片
      const img = new Image();
      img.src = 'https://picsum.photos/400/200'; // 示例图片
      img.onload = () => {
        ctx.drawImage(img, 0, 0, 400, 200);
      };
    </script>
  </body>
</html>

效果预览

复杂路径裁剪示例

奇偶规则裁剪

代码示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奇偶规则裁剪示例</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script>
      // 获取Canvas元素和绘图上下文
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      // 创建一个带有孔的矩形路径
      ctx.beginPath();
      ctx.rect(50, 50, 300, 100); // 外部矩形
      ctx.rect(100, 70, 200, 60); // 内部矩形，形成一个孔
      ctx.clip('evenodd'); // 使用奇偶规则

      // 绘制渐变背景
      const gradient = ctx.createLinearGradient(0, 0, 400, 0);
      gradient.addColorStop(0, 'red');
      gradient.addColorStop(1, 'blue');
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, 400, 200);
    </script>
  </body>
</html>