canvas上添加图片

Canvas 是 HTML5 中的一个标签，用于在网页上绘制图形。要在 Canvas 上添加图片，你需要通过 JavaScript 来操作。以下是基本步骤：

1. **创建 Canvas 元素**：
首先，在HTML中创建一个 `<canvas>` 标签，并给它一个唯一的 ID，例如：

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

2. **获取 Canvas 对象**：
使用 JavaScript 的 `document.getElementById()` 函数获取 Canvas 对象，比如 `var canvas = document.getElementById('myCanvas')`。

3. **设置绘图上下文**：
调用 `canvas.getContext('2d')` 获取 2D 绘图上下文，它是处理图像操作的核心对象，比如：

   var ctx = canvas.getContext('2d');

4. **加载图片**：
使用 `Image` 对象来加载图片，设置完成回调函数：

   var img = new Image();
   img.src = 'path/to/your/image.jpg'; // 替换为实际路径
   img.onload = function() {
       // 图片加载完成后调用这里
   };

5. **绘制图片**：
在图片加载完毕后，你可以将图片画到 Canvas 上：

   img.onload = function() {
       ctx.drawImage(img, 0, 0); // 将图片绘制在左上角
   }

6. **可选：调整大小和位置**：
如果需要，可以调整图片的位置和大小：

   ctx.drawImage(img, x, y, img.width, img.height, dx, dy, dw, dh);

其中 `(x, y)` 是原点，`(dx, dy)` 是目标区域左上角，`(dw, dh)` 是新尺寸。