如何将图片画到canvas上？都有哪些方法？

在前端开发中，可以使用多种方法将图片绘制到 canvas 元素上。以下是几种常见的方法：

1. drawImage() 方法:

这是最常用的方法，也是功能最强大的方法。drawImage() 允许你绘制整个图像或图像的一部分到 canvas 上，还可以缩放和裁剪图像。

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

img.onload = function() {
  // 绘制完整图像
  ctx.drawImage(img, 0, 0);

  // 绘制缩放图像
  ctx.drawImage(img, 0, 100, 50, 50); // 目标区域 x, y, width, height

  // 绘制裁剪图像
  ctx.drawImage(img, 10, 10, 50, 50, 150, 0, 100, 100); // 源区域 x, y, width, height, 目标区域 x, y, width, height
};

img.src = 'image.jpg';

2. 使用 createPattern() 创建图案:

createPattern() 方法允许你创建一个重复的图像图案，然后可以使用该图案填充或描边 canvas 上的形状。

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

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

img.src = 'image.jpg';

3. 使用 putImageData() 绘制图像数据:

如果你已经拥有图像的像素数据（例如，通过 getImageData() 获取），可以使用 putImageData() 方法将数据绘制到 canvas 上。这种方法通常用于图像处理和操作。

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

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  const imageData = ctx.getImageData(0, 0, img.width, img.height);
  // ... 对 imageData 进行处理 ...
  ctx.putImageData(imageData, 0, 0);
};

img.src = 'image.jpg';

4. SVG <image> 标签 (在SVG canvas中):

如果你的 canvas 是 SVG 格式的，你可以使用 <image> 标签直接嵌入图像。

<svg width="200" height="200">
  <image href="image.jpg" x="0" y="0" width="200" height="200" />
</svg>

选择哪种方法？

• 对于简单的图像绘制和操作，drawImage() 是最直接和最有效的方法。
• 对于创建重复图案，createPattern() 是最佳选择。
• 对于需要直接操作像素数据的场景，putImageData() 非常有用。
• 对于 SVG canvas，<image> 标签提供了一种简单的方式来嵌入图像。

记住，在使用 drawImage() 和 createPattern() 时，需要确保图像已完全加载后再进行绘制，否则可能会导致绘制失败。 使用 onload 事件监听图像加载完成是一个很好的实践。