深入解析 HTML5 Canvas 的 ctx.drawImage 方法：语法、参数与示例

`ctx.drawImage()` 是 HTML5 Canvas API 中的一个方法，用于在画布上绘制图像。它允许你将一个图像（或另一个画布）绘制到当前画布上的指定位置。 `ctx.drawImage()` 的语法如下： ```javascript ctx.drawImage(image, x, y, width, height); ``` 参数说明： - `image`：要绘制的图像、视频或另一个画布对象。 - `x`：图像在画布上的 x 坐标。 - `y`：图像在画布上的 y 坐标。 - `width`：可选参数，要绘制的图像的宽度。如果省略此参数，将使用图像的原始宽度。 - `height`：可选参数，要绘制的图像的高度。如果省略此参数，将使用图像的原始高度。示例代码： ```html <!DOCTYPE html> <html> <head> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="200" height="100"></canvas> <script> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.src = 'your-image-url'; img.onload = function() { ctx.drawImage(img, 0, 0, 200, 100); } </script> </body> </html> ``` 在这个示例中，我们首先创建了一个画布元素，并设置了宽度和高度。然后，我们获取画布的 2D 上下文，并创建一个新的图像对象。当图像加载完成后，我们使用 `ctx.drawImage()` 方法将图像绘制到画布上，设置宽度和高度为 200 和 100。 ######[AI写代码神器 | 458点数解答 | 2024-06-06 12:03:19]

服务商

更多选项

快捷项

自定义