HTML canvas createPattern() 方法（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，HTML Canvas 是一个功能强大的绘图工具，它允许开发者通过 JavaScript 直接在浏览器中绘制图形、动画和复杂视觉效果。而 createPattern() 方法作为 Canvas 的核心功能之一，为开发者提供了灵活的图案填充能力，无论是创建复杂的纹理背景、动态艺术效果，还是实现游戏中的粒子系统，都能通过这一方法高效实现。

本文将从零开始讲解 createPattern() 方法，通过代码示例和实际场景分析，帮助读者掌握其核心原理和应用场景。无论你是编程新手还是有一定经验的开发者，都能从中获得实用的知识和灵感。

一、Canvas 基础：绘制图形的起点

在深入 createPattern() 之前，我们需要先了解 Canvas 的基本工作流程。Canvas 是一个 HTML5 元素，通过 <canvas> 标签定义，其核心功能是通过 JavaScript 的 getContext('2d') 方法获取绘图上下文（即 2D 渲染环境）。

1.1 Canvas 的基本结构

<canvas id="myCanvas" width="400" height="300"></canvas>  

通过 JavaScript 获取 Canvas 上下文：

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

1.2 简单图形绘制示例

// 绘制一个红色矩形  
ctx.fillStyle = 'red';  
ctx.fillRect(10, 10, 100, 50);  

以上代码展示了 Canvas 的基本用法：设置填充颜色后，通过 fillRect() 方法绘制矩形。

二、createPattern() 方法：图案填充的魔法

createPattern() 方法允许开发者将图像（如图片、其他 Canvas 元素）转换为可重复的图案，并将其用于填充形状、线条等。其语法如下：

ctx.createPattern(image, repetition);  

其中：

• image：要转换为图案的图像元素（如 Image 对象或另一个 Canvas 元素）。
• repetition：指定图案的重复方式，可选值包括 repeat（默认）、repeat-x、repeat-y、no-repeat。

2.1 方法的核心逻辑：将图像转化为“墙纸”

想象你正在为房间铺贴墙纸，createPattern() 的作用类似：它将指定的图像作为“墙纸”，根据重复模式（repetition）自动铺满整个画布区域。例如：

// 假设已加载一张图片  
const img = new Image();  
img.src = 'pattern.png';  

img.onload = function() {  
  const pattern = ctx.createPattern(img, 'repeat');  
  ctx.fillStyle = pattern;  
  ctx.fillRect(0, 0, canvas.width, canvas.height);  
};  

这段代码会将 pattern.png 图像以 repeat 模式铺满整个 Canvas。

三、参数详解：图像与重复模式的组合艺术

3.1 图像的准备与加载

createPattern() 的第一个参数必须是一个已加载的图像对象。因此，加载图像时需注意：

const img = new Image();  
img.src = 'path/to/image.jpg';  

// 确保图像加载完成后执行操作  
img.onload = function() {  
  // 在此处调用 createPattern()  
};  

如果直接使用未加载完成的图像，可能导致图案无法显示。

3.2 重复模式：四类经典模式对比

下表总结了 repetition 参数的四种模式及其效果：

代码示例：对比不同重复模式

const patterns = ['repeat', 'repeat-x', 'repeat-y', 'no-repeat'];  
const offset = 120;  

for (let i = 0; i < patterns.length; i++) {  
  const pattern = ctx.createPattern(img, patterns[i]);  
  ctx.fillStyle = pattern;  
  ctx.fillRect(20 + i * offset, 20, 100, 100);  
}  

此代码将在 Canvas 上并排展示四种模式的效果。

四、进阶应用：结合变换与动画

4.1 通过 ctx.transform() 变换图案

createPattern() 可以与 Canvas 的变换方法（如 scale(), rotate()）结合，创造出动态效果：

ctx.save(); // 保存当前上下文状态  

// 缩放图案  
ctx.scale(0.5, 0.5);  
const scaledPattern = ctx.createPattern(img, 'repeat');  
ctx.fillStyle = scaledPattern;  
ctx.fillRect(0, 0, 200, 200);  

ctx.restore(); // 恢复上下文状态  

此代码将图案缩小 50% 后重复铺满指定区域。

4.2 动态生成图案（如实时数据可视化）

createPattern() 的图像参数可以是另一个 Canvas 元素，这意味着你可以动态生成图案：

// 创建一个隐藏的 Canvas 用于生成图案  
const patternCanvas = document.createElement('canvas');  
const pCtx = patternCanvas.getContext('2d');  

// 在隐藏 Canvas 上绘制随机形状  
pCtx.fillStyle = 'rgba(255,0,0,0.5)';  
pCtx.fillRect(0, 0, 50, 50);  

// 将隐藏 Canvas 转换为图案  
const dynamicPattern = ctx.createPattern(patternCanvas, 'repeat');  
ctx.fillStyle = dynamicPattern;  
ctx.fillRect(0, 0, 400, 300);  

此示例展示了如何利用动态生成的图案填充画布。

五、常见问题与解决方案

5.1 图案未显示的可能原因

• 图像未加载完成：确保在 img.onload 回调中调用 createPattern()。
• 上下文状态错误：使用 ctx.save() 和 ctx.restore() 管理上下文状态，避免其他设置干扰图案绘制。

5.2 性能优化建议

• 避免频繁创建新图案：若图案内容不变，可预先生成并复用。
• 使用低分辨率图像：高分辨率图片会显著降低性能，尤其在动态场景中。

六、实战案例：创建动态星空背景

6.1 案例目标

实现一个由星形图案组成的动态星空背景，星星随鼠标移动而变化。

6.2 实现步骤

1. 创建隐藏的星形图案 Canvas：

const starCanvas = document.createElement('canvas');  
starCanvas.width = 50;  
starCanvas.height = 50;  
const sCtx = starCanvas.getContext('2d');  

// 绘制星形路径  
sCtx.beginPath();  
sCtx.moveTo(25, 0);  
// ...（省略详细路径代码）...  
sCtx.fillStyle = 'white';  
sCtx.fill();  

2. 将星形转换为可重复图案：

const starPattern = ctx.createPattern(starCanvas, 'repeat');  

3. 动态更新图案位置（响应鼠标移动）：

canvas.addEventListener('mousemove', (e) => {  
  ctx.clearRect(0, 0, canvas.width, canvas.height);  
  ctx.translate(e.offsetX, e.offsetY); // 移动坐标原点  
  ctx.fillStyle = starPattern;  
  ctx.fillRect(-200, -200, 400, 400); // 绘制范围覆盖整个画布  
});  

6.3 最终效果

此案例通过 createPattern() 结合鼠标事件，实现了动态、无缝的星群效果，展现了该方法在交互设计中的潜力。

结论

createPattern() 方法是 HTML Canvas 的一项强大工具，它通过图像重复与变换，为开发者提供了无限创意可能。无论是静态背景、动态效果，还是复杂的数据可视化，都能通过这一方法高效实现。

掌握 createPattern() 的关键在于理解其与 Canvas 上下文状态、图像加载、变换方法的结合方式。通过不断实践和探索，开发者可以将其灵活应用于各类项目，创造出独特且富有表现力的视觉效果。

希望本文能帮助你在 Canvas 开发的道路上迈出坚实一步，未来不妨尝试将 createPattern() 与其他 Canvas 方法（如 clip(), drawImage()）结合，解锁更多可能性！