js canvas 图片填充

JavaScript 的 Canvas API 提供了一个强大的绘图环境，允许开发者使用 HTML5 的 <canvas> 元素进行图形绘制。图片填充是 Canvas 中的一个常见操作，它涉及到将一张图片作为纹理填充到一个形状或多个形状中。

基础概念

在 Canvas 中，图片填充通常是通过 createPattern 方法来实现的。这个方法接受两个参数：一个是图片对象，另一个是重复模式（如 repeat、repeat-x、repeat-y 或 no-repeat）。创建的模式可以随后被用作填充样式。

类型

Repeat：图片在水平和垂直方向上重复。
Repeat-x：图片仅在水平方向上重复。
Repeat-y：图片仅在垂直方向上重复。
No-repeat：图片不重复，只显示一次。

应用场景

背景设计：为网页元素或游戏界面创建独特的背景。
纹理映射：在3D图形中应用纹理，或在2D游戏中创建连续的地形。
UI元素：为按钮或其他用户界面组件添加图案效果。

示例代码

以下是一个简单的示例，展示了如何在 Canvas 中使用图片填充：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas 图片填充示例</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
// 获取 canvas 元素和绘图上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 创建一个新的 Image 对象
var img = new Image();
img.src = 'path/to/your/image.jpg'; // 替换为你的图片路径

// 当图片加载完成后执行填充操作
img.onload = function() {
    // 创建一个图案，使用图片并在两个方向上重复
    var pattern = ctx.createPattern(img, 'repeat');
    
    // 设置填充样式为创建的图案
    ctx.fillStyle = pattern;
    
    // 绘制一个矩形并应用填充
    ctx.fillRect(0, 0, canvas.width, canvas.height);
};
</script>
</body>
</html>

遇到问题的原因及解决方法

问题：图片填充时出现拉伸或变形。

原因：可能是由于图片的尺寸和 <canvas> 元素的尺寸不匹配，或者是图片加载时的尺寸发生了变化。

解决方法：

确保图片的原始尺寸适合填充区域。
在图片加载完成后，检查并调整图片的尺寸，使其与 <canvas> 元素的尺寸相匹配。
使用 img.width 和 img.height 属性来设置图片的显示尺寸。

img.onload = function() {
    // 调整图片尺寸以适应 canvas
    img.width = canvas.width;
    img.height = canvas.height;
    
    // 创建图案并填充
    var pattern = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
};

通过以上方法，可以有效地解决图片填充时可能出现的尺寸问题。