HTML5中canvas的drawImage方法怎么用 - 问答

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方法。

0 赞

0 踩