js drawimage

// 使用 drawImage 方法绘制图像

// 创建一个 canvas 元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 设置 canvas 的宽度和高度
canvas.width = 500;
canvas.height = 500;

// 将 canvas 添加到页面中
document.body.appendChild(canvas);

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

// 指定图像的路径
img.src = 'path/to/your/image.jpg';

// 图像加载完成后的回调函数
img.onload = function() {
    // 使用 drawImage 方法绘制图像
    // drawImage(image, dx, dy) - 在指定位置绘制图像
    ctx.drawImage(img, 0, 0);

    // drawImage(image, dx, dy, dWidth, dHeight) - 绘制并调整图像大小
    ctx.drawImage(img, 100, 100, 300, 300);

    // drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) - 绘制图像的一部分
    ctx.drawImage(img, 50, 50, 100, 100, 200, 200, 200, 200);
};

// 如果图像加载失败，输出错误信息
img.onerror = function() {
    console.error('Failed to load image');
};

解释说明：

• drawImage 是 Canvas API 中用于在画布上绘制图像的方法。
• drawImage 有三种用法：
  1. drawImage(image, dx, dy)：将图像绘制到指定的坐标 (dx, dy)。
  2. drawImage(image, dx, dy, dWidth, dHeight)：将图像绘制到指定的坐标，并调整其大小为 (dWidth, dHeight)。
  3. drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：从源图像中裁剪出一部分 (sx, sy, sWidth, sHeight)，然后将其绘制到目标位置 (dx, dy)，并调整其大小为 (dWidth, dHeight)。