我想添加一个按钮，可以加载下一个图像文件，并显示到画布

<button id="loadButton">加载下一个图像</button>
<canvas id="canvas"></canvas>

// 获取按钮和画布元素
var loadButton = document.getElementById("loadButton");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 定义图像文件列表和当前图像索引
var imageFiles = ["image1.jpg", "image2.jpg", "image3.jpg"];
var currentIndex = 0;

// 加载下一个图像文件并显示在画布上
function loadNextImage() {
  // 创建一个新的图像对象
  var image = new Image();

  // 设置图像加载完成时的回调函数
  image.onload = function() {
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 将图像绘制到画布上
    ctx.drawImage(image, 0, 0);

    // 更新当前图像索引
    currentIndex = (currentIndex + 1) % imageFiles.length;
  };

  // 设置图像源为下一个图像文件
  image.src = imageFiles[currentIndex];
}

// 添加按钮点击事件监听器
loadButton.addEventListener("click", loadNextImage);