canvas如何自定义绘制图片

在Canvas中，可以使用`drawImage()`方法来绘制图片。该方法接受三个参数：

1. 图片对象：可以是`<img>`、`<canvas>`或`<video>`元素。
2. 图片左上角在Canvas中的X坐标。
3. 图片左上角在Canvas中的Y坐标。

如果要自定义绘制图片，则需要先创建一个`Image`对象，并将其加载为图片资源。然后，在`Image`对象的`onload`事件中，可以将图片绘制到Canvas上。

下面是一个简单的示例代码，演示了如何使用Canvas自定义绘制一张图片：

// 创建一个Image对象
var img = new Image();

// 设置图片资源
img.src = 'path/to/image.jpg';

// 监听Image对象的onload事件
img.onload = function() {
  // 获取Canvas元素
  var canvas = document.getElementById('my-canvas');

  // 获取Canvas的上下文
  var ctx = canvas.getContext('2d');

  // 自定义绘制图片
  ctx.drawImage(img, 0, 0, 200, 200);
};

在上面的代码中，我们首先创建了一个`Image`对象，并将其加载为图片资源。然后，在`Image`对象的`onload`事件中，获取了Canvas元素和其上下文对象，并使用`drawImage()`方法将图片绘制到Canvas上。其中，第一个参数是图片对象，第二和第三个参数分别是图片在Canvas中的坐标，第四和第五个参数分别是图片在Canvas中的宽度和高度。

需要注意的是，如果图片资源未能成功加载，则无法绘制图片。因此，在使用`drawImage()`方法之前，一定要确保图片资源已经加载完成。