强化对 Canvas 中 drawImage 方法参数的理解

发布于 2022-09-07阅读 634

在对 Canvas 画布绘图时，我们常使用的函数必然少不了 drawImage。但因其参数巨多，且各参数可以组合多种语法让人难以短时记忆。所以避免后续绘制 Canvas 时出现图片裁剪、元素定位等问题，这里对 drawImage 做一个便于理解的小结。

绘制图像（drawImage）的标准语法：

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, dx, dy);

为了便于理解，可以将 drawImage 的参数拆分为三部分

(image[, 图片裁剪参数], 画布绘制区域参数) 下面通过 ES6 语法进行详解：

let image = document.querySelector('#img')
let canvas = document.querySelector('#canvas')
let ctx = canvas.getContext('2d')

/**
 * @brief 裁剪 image 的指定区域
 * @notice 1、如果 imageParams 中的 sWidth, sWidth 未赋值，则从（sx,sy）作为起始坐标，一直裁剪到源图片的右下角
 * @notice 2、imageParams 为可选项，默认绘制全尺寸源图片
 * @example 省略 imageParams 语法：ctx.drawImage(image, dx, dy, dWidth, dHeight)
 */
let imageParams = [
	0,            // [ sx       ] 裁剪 image 的起始点 X 轴坐标
	0,            // [ sy       ] 裁剪 image 的起始点 Y 轴坐标
	image.width,  // [ sWidth   ] 裁剪的宽度
	image.height  // [ sHeight  ] 裁剪的高度
];

/**
 * @brief 在 Canvas 画布上指定一片区域绘制剪裁后的 image
 * @notice 1、如果 Canvas 的 dWidth, dHeight 未赋值。则绘制完整尺寸的 image，其宽高不会缩放
 * @example 省略 imageParams 和 Canvas 的绘制宽高后，其语法：ctx.drawImage(image, dx, dy)
 */
let canvasParams = [
	0,            // [ dx       ] 在 Canvas 元素上绘制起始点 X 轴坐标
	0,            // [ dy       ] 在 Canvas 元素上绘制起始点 Y 轴坐标
	canvas.width, // [ dWidth   ] 在 Canvas 元素上绘制图像的宽度
	canvas.height // [ dHeight  ] 在 Canvas 元素上绘制图像的高度
];

// ES6 简写:
ctx.drawImage(image, ...imageParams, ...canvasParams);
Canvas