js canvas绘制图片

// 获取 canvas 元素和其上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 创建一个新的 Image 对象
const img = new Image();

// 设置图片加载完成后的回调函数
img.onload = function() {
  // 使用 drawImage 方法将图片绘制到 canvas 上
  ctx.drawImage(img, 0, 0);
};

// 指定图片的 URL
img.src = 'https://example.com/path/to/image.png';

解释说明：

1. 获取 Canvas 和上下文：首先通过 document.getElementById 获取 canvas 元素，然后使用 getContext('2d') 获取 2D 绘图上下文。
2. 创建 Image 对象：创建一个新的 Image 对象用于加载图片。
3. 设置 onload 回调：当图片加载完成后，触发 onload 回调函数，在其中使用 drawImage 方法将图片绘制到 canvas 上。
4. 指定图片源：通过设置 img.src 属性来指定要加载的图片 URL。

这样就可以在网页中使用 JavaScript 和 Canvas API 来绘制图片了。