阅读量:3
HTML5中的canvas的drawImage方法用于在画布上绘制图像。它有多种用法，以下是其中一种常见的用法：
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.src = "path/to/image.png"; img.onload = function() { // 在画布上绘制图像 ctx.drawImage(img, x, y); }; 在上面的代码中，首先获取到canvas元素和2D上下文对象。然后创建一个Image对象，并设置它的src属性为要绘制的图像的路径。在图像加载完成后，通过调用drawImage方法，在给定的坐标(x, y)处绘制图像。
还可以使用其他参数来指定绘制的图像的宽度和高度，以及截取图像的一部分进行绘制。下面是一个带有更多参数的示例：
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.src = "path/to/image.png"; img.onload = function() { // 在画布上绘制图像的一部分 ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height); }; 在这个示例中，除了指定图像的路径外，还指定了要截取的图像的起始坐标(sx, sy)，以及宽度和高度(swidth, sheight)。然后指定在画布上绘制的图像的起始坐标(x, y)，以及图像的宽度和高度(width, height)。
需要注意的是，图像必须在加载完成后才能绘制，因此要在onload回调函数中调用drawImage方法。
