如何在Canvas中实现图片展示？

12 min read

要在canvas中显示图片，需要使用HTML5的<canvas>元素和JavaScript的drawImage()方法。以下是一个示例：

HTML:

<canvas id="myCanvas"></canvas>

JavaScript:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};
img.src = "image.jpg"; // 图片路径

在此示例中，我们首先获得canvas元素和用于绘图的上下文对象。然后，我们创建一个新的Image对象，并在其加载完成时使用drawImage()方法将其绘制到canvas上。 在这种情况下，我们假设图像文件名为“image.jpg”，并将其路径分配给image对象的src属性。

如果需要设置图片的宽度和高度，可在drawImage()方法中添加相应的参数，如下所示：

ctx.drawImage(img, x, y, width, height);

其中，x和y是图片左上角在canvas上的坐标，width和height是图片的宽度和高度。