canvas 局部使用drawImage

要在Canvas上局部使用`drawImage()`方法，可以使用以下步骤：

1. 创建一个`Image`对象，指定要加载的图像路径。

2. 使用`onload`事件处理程序等待图像加载完成。

3. 在`onload`事件处理程序中创建一个局部图像的剪切路径。

4. 使用`drawImage()`方法将剪切路径中的图像绘制到Canvas上。

以下是示例代码，展示如何在Canvas上局部使用`drawImage()`方法：

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

// 指定要加载的图像路径
img.src = 'example.jpg';

// 等待图像加载完成
img.onload = function() {
  // 创建一个剪切路径
  context.beginPath();
  context.rect(50, 50, 200, 200);
  context.closePath();

  // 将剪切路径设置为剪切区域
  context.clip();

  // 将剪切路径中的图像绘制到Canvas上
  context.drawImage(img, 0, 0);
}

在这个示例中，我们创建一个`Image`对象并指定要加载的图像路径。然后，我们等待图像加载完成，创建一个剪切路径并将其设置为剪切区域。最后，我们使用`drawImage()`方法将剪切路径中的图像绘制到Canvas上。这将导致只有在剪切路径内部的图像才能被绘制，因此我们实现了一个局部使用`drawImage()`方法的效果。