用Canvas轻松绘制已加载图片：详解 `drawImage` 方法及示例

在Canvas中绘制一个已经加载好的图片，你需要使用`drawImage`方法。这个方法接受三个参数：要绘制的图像、源图像的x坐标和y坐标、目标canvas的x坐标和y坐标。 以下是一个简单的示例： ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // 创建一个新的Image对象 var img = new Image(); // 当图片加载完成后，将其绘制到canvas上 img.onload = function() { ctx.drawImage(img, 10, 10); }; // 设置图片的src属性开始加载图片 img.src = 'your-image-url'; ``` 在这个示例中，我们首先获取了canvas的2D渲染上下文，然后创建了一个新的Image对象。当我们设置图片的src属性后，浏览器会开始加载图片。当图片加载完成后，`onload`回调函数会被调用，我们在回调函数中调用`drawImage`方法将图片绘制到canvas上。 注意，`drawImage`方法的第二个和第三个参数是源图像的x坐标和y坐标，如果你只想绘制整个图像，这两个参数可以省略。第四个和第五个参数是目标canvas的x坐标和y坐标，你可以根据需要调整这两个参数来改变图片在canvas上的位置。 ######[AI写代码神器 | 273点数解答 | 2023-12-16 23:12:04]