canvas.getContext drawImage 怎么使用

canvas.getContext('2d') 方法返回一个用于在画布上制二维图形的上下文对象。drawImage() 方法是其中之一，用于在画布上绘制图像。

使用 drawImage() 方法，你可以将图像绘制到画布上的指定位置，并可以选择缩放、裁剪或者旋转图像。

以下是 drawImage() 方法的使用方式：

// 获取画布上下文对象
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

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

// 设置图像源
img.src = 'image.jpg';

// 等待图像加载完成后再绘制
img.onload = function() {
  // 绘制图像到画布上
  ctx.drawImage(img, x, y, width, height);
};

在上述代码中，首先通过 `canvas.getContext('2d')` 获取了画布的上下文对象。然后创建了一个新的图像对象，并设置了图像的源。接着使用 `drawImage()` 方法将图像绘制到画布上，其中的参数 `x` 和 `y` 表示图像在画布上的位置，`width` 和 `height` 表示图像的宽度和高度。