HTML将画布放在按钮顶部

Question

有很多“如何将按钮放在画布上”的文章，但我正在尝试做相反的事情，画布的大小为按钮大小的 100%，我设置为透明并在上面绘制内容使用 Javascript 的按钮。

我有一排按钮

.mainbut
{
    width: 8.5vw;
    height: 6.5vh;
    border: 0.25vw solid white;
    border-radius: 0.5vw;
    color: white;
    font-size: 1.4vw;
    opacity: 1;
    vertical-align: text-bottom;
    margin-top: 0vh;
    margin-bottom: 0vh;
}


<div>
    <button class='mainbut' id='main1'  onclick='Main(1)'></button>
    <button class='mainbut' id='main2'  onclick='Main(2)'></button>
    <button class='mainbut' id='main3'  onclick='Main(3)'></button>
    <button class='mainbut' id='main4'  onclick='Main(4)'></button>
    <button class='mainbut' id='main5'  onclick='Main(5)'></button>
    <button class='mainbut' id='main6'  onclick='Main(6)'></button>
    <button class='mainbut' id='main7'  onclick='Main(7)'></button>
    <button class='mainbut' id='main8'  onclick='Main(8)'></button>
    <button class='mainbut' id='main9'  onclick='Main(9)'></button>
    <button class='mainbut' id='main10' onclick='Main(10)'></button>
    <button class='mainbut' id='main11' onclick='Main(11)'></button>
</div>

我想在每个相同大小的画布上创建一个画布。我尝试了各种方法，但画布要么将按钮垫在第一个按钮上，要么全部与第一个按钮重叠。

任何建议表示赞赏。

Answer 1

您正在寻找的是名为CSS Houdini 的东西，尤其是它的Paint API。这些是浏览器目前正在积极开发的新（ish）标准，它允许编码人员向广泛的 DOM 元素（包括 元素）添加类似画布的背景。

将真实画布映射到按钮的问题在于，您需要做大量工作以使两者保持同步（因为按钮可以具有响应大小），同时确保所有按钮相关用户事件仍能正确触发和冒泡。

Answer 2

不确定这有多有效，但您可以尝试这样的方法为每个按钮创建一个画布并附加它。

我不想乱搞 vw/vh，所以我为这个演示设置了每个按钮的固定大小。

let canvases = [];
let ctx = [];
let buttons = document.querySelectorAll("button");

function createCanvas() {
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].style.left = i * 70 + "px";
    buttons[i].innerHTML = "Button"+(i+1)
    canvases.push(document.createElement("canvas"));
    buttons[i].appendChild(canvases[i]);
    canvases[i].id = "canvas" + i;
    canvases[i].width = buttons[i].getBoundingClientRect().width;
    canvases[i].height = buttons[i].getBoundingClientRect().height;
    ctx[i] = canvases[i].getContext("2d");
    buttons[i].style.backgroundColor = "rgb("+10*i+","+20*i+","+7*i+")";
    
  }
}
createCanvas();

let particleArray = [];
class Particle {
  constructor() {
    this.x = Math.random() * 60;
    this.y = Math.random() * 20;
    this.r = 3;
    this.vx = Math.random() * 3 - 1.5;
    this.vy = Math.random() * 3 - 1.5;
  }
  draw() {
    for (let i = 0; i < ctx.length; i++) {
    ctx[i].fillStyle = "rgb(200,"+20*i+","+30*i+")";
    ctx[i].beginPath();
    ctx[i].arc(this.x, this.y, this.r, 0, Math.PI * 2);
    ctx[i].fill();
    }
  }
  update() {
    this.x += this.vx;
    this.y += this.vy;

    this.draw();
  }
  collision() {
    if (this.x + this.r < 0 || this.x + this.r > 60) {
      this.vx = -this.vx;
      if (this.y + this.r < 0 || this.y + this.r > 20) {
        this.vy = -this.vy;
      }
    }
  }
}

function init() {
  for (let i = 0; i < 10; i++) {
    particleArray.push(new Particle());
  }
}
init();

function animate() {
  for (let i = 0; i < ctx.length; i++) {
    ctx[i].clearRect(0, 0, 60, 20);
  }
  for (let i = 0; i < particleArray.length; i++) {
    particleArray[i].update();
    particleArray[i].collision();
  }
  requestAnimationFrame(animate);
}

animate();

#container {
  position: relative;
  width: 50px;
  height: 20px;
}
.mainbut {
  width: 60px;
  height: 20px;
  border: 0.25vw solid transparent;
  border-radius: 0.5vw;
  color: white;
  font-size: 1.4vw;
  opacity: 1;
  vertical-align: text-bottom;
  margin-top: 0vh;
  margin-bottom: 0vh;
  box-shadow: 4px 4px 4px black;
}

button {
  position: absolute;
  
}

canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div id='container'>
  <button class='mainbut' id='main1' onclick='Main(1)'>
  </button>
  <button class='mainbut' id='main2' onclick='Main(2)'></button>
  <button class='mainbut' id='main3' onclick='Main(3)'></button>
  <button class='mainbut' id='main4' onclick='Main(4)'></button>
  <button class='mainbut' id='main5' onclick='Main(5)'></button>
  <button class='mainbut' id='main6' onclick='Main(6)'></button>
  <button class='mainbut' id='main7' onclick='Main(7)'></button>
  <button class='mainbut' id='main8' onclick='Main(8)'></button>
  <button class='mainbut' id='main9' onclick='Main(9)'></button>
  <button class='mainbut' id='main10' onclick='Main(10)'></button>
  <button class='mainbut' id='main11' onclick='Main(11)'></button>
</div>