HTML 把 canvas 放在按钮上面

Question

有很多“如何将按钮放在 canvas 之上”的文章，但我正在尝试做相反的事情，canvas 的大小为按钮的 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>

我想在每个相同尺寸的上面创建一个 canvas。我尝试了各种方法，但 canvas 要么将按钮填充到第一个按钮上，要么全部与第一个按钮重叠。

感谢任何建议。

Answer 1

不太确定这样做的效率如何，但您可以尝试类似的方法为每个按钮创建一个 canvas 并附加它。

我不想摆弄 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>

Answer 2

您要找的是一个叫做 CSS Houdini, in particular its Paint API 的东西。这些是浏览器目前正在积极开发的新（ish）标准，允许编码人员向范围广泛的 DOM 元素添加类似 canvas 的背景 - 包括

HTML 把 canvas 放在按钮上面

HTML put canvas on top of button

html

canvas

button