Html / JS -在画布上绘制按钮

<canvas id="myCanvas" width="200" height="50"></canvas>

// 获取对画布的引用
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 绘制按钮的外观
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制按钮的文本
ctx.font = "20px Arial";
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.fillText("按钮", canvas.width / 2, canvas.height / 2 + 8);

// 添加按钮的交互
canvas.addEventListener("click", function(event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;
  
  if (x >= 0 && x <= canvas.width && y >= 0 && y <= canvas.height) {
    // 按钮被点击
    alert("按钮被点击！");
  }
});