JavaScript Canvas createPattern 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas createPattern 方法。此方法对于从图像、视频或其他画布元素创建重复图案至关重要。掌握图案对于创建纹理和设计至关重要。
基本定义
Canvas 图案是用于填充或描边形状的重复图像。createPattern 方法从源图像或画布创建图案。图案可以以不同的方式重复，以创建各种效果。
该方法接受两个参数：图像源和重复类型。重复类型可以是 "repeat"（重复）、"repeat-x"（水平重复）、"repeat-y"（垂直重复）或 "no-repeat"（不重复）。图案可用于填充和描边操作。
来自图像的基本图案
此示例演示了如何从图像创建简单图案。
<!DOCTYPE html>
<html>
<head>
<title>Basic Canvas Pattern</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<img id="patternImg" src="pattern.png" style="display:none;">
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = document.getElementById('patternImg');
img.onload = function() {
const pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
</script>
</body>
</html>
在此基本示例中，我们创建一个画布并加载一个隐藏的图像。当图像加载时，我们使用 createPattern 从中创建重复图案。
图案设置为填充样式，并用于填充整个画布。这展示了从图像创建和使用图案的最简单方法。
来自另一个画布的图案
此示例展示了如何从另一个画布元素创建图案。
<!DOCTYPE html>
<html>
<head>
<title>Canvas to Canvas Pattern</title>
</head>
<body>
<canvas id="patternCanvas" width="50" height="50" style="display:none;"></canvas>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
// Create pattern source
const patternCanvas = document.getElementById('patternCanvas');
const patternCtx = patternCanvas.getContext('2d');
patternCtx.fillStyle = 'red';
patternCtx.fillRect(0, 0, 25, 25);
patternCtx.fillStyle = 'blue';
patternCtx.fillRect(25, 0, 25, 25);
patternCtx.fillStyle = 'green';
patternCtx.fillRect(0, 25, 25, 25);
patternCtx.fillStyle = 'yellow';
patternCtx.fillRect(25, 25, 25, 25);
// Use pattern
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const pattern = ctx.createPattern(patternCanvas, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);
</script>
</body>
</html>
在这里，我们创建了一个隐藏的画布，作为我们的图案源。我们在其上绘制了一个带有四种不同颜色方块的棋盘图案。
然后，我们将此画布用作 createPattern 的源，并用重复图案填充主画布。这展示了如何以编程方式生成图案。
具有不同重复类型的图案
此示例演示了四种不同的图案重复类型。
<!DOCTYPE html>
<html>
<head>
<title>Pattern Repeat Types</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<img id="patternImg" src="tile.png" style="display:none;">
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = document.getElementById('patternImg');
img.onload = function() {
// Repeat
const pattern1 = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern1;
ctx.fillRect(0, 0, 200, 200);
// Repeat-x
const pattern2 = ctx.createPattern(img, 'repeat-x');
ctx.fillStyle = pattern2;
ctx.fillRect(200, 0, 200, 200);
// Repeat-y
const pattern3 = ctx.createPattern(img, 'repeat-y');
ctx.fillStyle = pattern3;
ctx.fillRect(0, 200, 200, 200);
// No-repeat
const pattern4 = ctx.createPattern(img, 'no-repeat');
ctx.fillStyle = pattern4;
ctx.fillRect(200, 200, 200, 200);
};
</script>
</body>
</html>
此示例将画布分为四个象限，每个象限显示不同的重复类型。图像图块根据指定的重复类型正常重复、水平重复、垂直重复或不重复。
“repeat”类型在两个方向上重复，“repeat-x”仅在水平方向上重复，“repeat-y”仅在垂直方向上重复，而“no-repeat”仅显示图像的一个实例。每个象限演示一种类型。
用于描边的图案
此示例展示了如何将图案用于描边形状而不是填充。
<!DOCTYPE html>
<html>
<head>
<title>Pattern Stroke</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<img id="patternImg" src="line-pattern.png" style="display:none;">
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = document.getElementById('patternImg');
img.onload = function() {
const pattern = ctx.createPattern(img, 'repeat');
ctx.strokeStyle = pattern;
ctx.lineWidth = 20;
ctx.beginPath();
ctx.arc(200, 150, 100, 0, Math.PI * 2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(350, 250);
ctx.stroke();
};
</script>
</body>
</html>
在这里，我们从图像创建图案，并将其用作描边样式而不是填充样式。我们用图案化的描边绘制了一个圆和一条线。
图案图像应设计为用作描边时效果良好。线宽设置为 20px，以使图案在描边中清晰可见。
动画图案
此高级示例演示了如何创建动画图案效果。
<!DOCTYPE html>
<html>
<head>
<title>Animated Pattern</title>
</head>
<body>
<canvas id="patternCanvas" width="50" height="50" style="display:none;"></canvas>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const patternCanvas = document.getElementById('patternCanvas');
const patternCtx = patternCanvas.getContext('2d');
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let angle = 0;
function animatePattern() {
// Update pattern source
patternCtx.clearRect(0, 0, patternCanvas.width, patternCanvas.height);
patternCtx.save();
patternCtx.translate(25, 25);
patternCtx.rotate(angle);
patternCtx.fillStyle = 'red';
patternCtx.fillRect(-20, -20, 40, 40);
patternCtx.restore();
// Use updated pattern
const pattern = ctx.createPattern(patternCanvas, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);
angle += 0.05;
requestAnimationFrame(animatePattern);
}
animatePattern();
</script>
</body>
</html>
此示例通过连续更新图案源画布来创建动画。我们在图案画布中旋转一个正方形，并使用它来填充主画布。
requestAnimationFrame 创建了一个流畅的动画循环。每一帧都更新图案源，从而在整个画布上产生动态的动画图案效果。
来源
在本文中，我们探讨了在 HTML 画布上创建和使用图案的各种技术。掌握这些方法对于在 Web 应用程序中创建复杂的纹理和设计至关重要。
作者
列出 所有 JS Canvas 教程。