深入解析：canvas的ctx.drawImage 9个参数用法及实例

`ctx.drawImage()` 方法用于在画布上绘制图像、视频或画布。它有9个参数，分别是： 1. image：要绘制的图像、视频或画布。 2. dx：目标画布上绘制图像的左上角 x 坐标。 3. dy：目标画布上绘制图像的左上角 y 坐标。 4. dWidth：图像的宽度。 5. dHeight：图像的高度。 6. sx：源图像的裁剪矩形的左上角 x 坐标。 7. sy：源图像的裁剪矩形的左上角 y 坐标。 8. sWidth：源图像的裁剪矩形的宽度。 9. sHeight：源图像的裁剪矩形的高度。 这些参数允许你在画布上绘制图像的一部分，并控制图像的位置、大小和裁剪区域。例如： ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const image = new Image(); image.src = 'path/to/your/image.png'; image.onload = function() { ctx.drawImage(image, 0, 0, 100, 100, 50, 50, 100, 100); }; ``` 在这个例子中，我们首先获取画布元素和它的上下文。然后，我们创建一个新的 `Image` 对象，并设置其 `src` 属性为图像的路径。当图像加载完成后，我们调用 `ctx.drawImage()` 方法，将图像的左上角绘制到目标画布的 (50, 50) 位置，同时设置图像的大小为 100x100。 ######[AI写代码神器 | 390点数解答 | 2024-06-06 12:04:31]