Canvas 图片上设置镂空文字效果

引言

在前端开发中，HTML5 元素为我们提供了强大的图形处理能力。通过结合使用 canvas 和 JavaScript，我们可以创造出丰富的视觉效果。本文将探讨如何在图片上设置镂空文字效果，即在图片上“挖”出文字形状，让文字背后的背景显示出来。这不仅是一个有趣的技巧，还能在多种场合下派上用场，比如制作个性化的徽标或动态背景。

基本概念和作用说明

镂空文字效果通常涉及到两个关键步骤：

1. 绘制背景图片：首先我们需要在 上绘制一张背景图片。
2. 绘制镂空文字：接着在相同的位置上绘制文字，但使用透明填充或混合模式来达到镂空效果。

关键技术点

• globalCompositeOperation：用于设置混合模式，决定新绘制的内容如何与已有内容混合。
• fillStyle：设置填充颜色，可以通过设置透明度来实现镂空效果。
• font：设置字体样式，包括大小、粗细等。
• fillText：用于在指定位置绘制填充的文字。

示例一：基本镂空文字效果

首先，我们来看一个简单的示例，演示如何在一个纯色背景上设置镂空文字效果。

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

// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

// 设置背景颜色
ctx.fillStyle = '#f00';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 设置文字样式
ctx.font = 'bold 48px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// 设置透明度来实现镂空效果
ctx.globalAlpha = 0;

// 在背景上绘制文字
ctx.fillText('Hello World', canvas.width / 2, canvas.height / 2);

// 恢复透明度
ctx.globalAlpha = 1;

示例二：在图片上设置镂空文字效果

接下来，我们将在一张图片上设置镂空文字效果。这里我们将使用 globalCompositeOperation 来实现镂空效果。

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

const img = new Image();
img.src = 'path/to/your/image.jpg';
img.onload = function() {
   
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制背景图片
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  // 设置文字样式
  ctx.font = 'bold 48px sans-serif';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // 设置混合模式为 "destination-out" 来实现镂空效果
  ctx.globalCompositeOperation = 'destination-out';

  // 在图片上绘制文字
  ctx.fillText('Hello World', canvas.width /