在 canvas 上放置 50% 透明 div，这样 canvas 仍然可见

Question

我无法将 div 放置在 canvas 之上，而 canvas 仍然可见。我只能找到 div 在 canvas 上方但 canvas 被隐藏的地方。如果有人有一个很好的例子。

var canvas = document.querySelector('canvas');
canvas.width = screen.width;
canvas.height = screen.height;
var context = canvas.getContext('2d');
var tau = 2 * Math.PI;

function Triangle(canvs, cnt, sid, f) {
  this.phase = 0;
  this.ctx = canvs.getContext('2d');
  this.first = f;
  this.sides = sid;
  this.canv = canvs;
  this.draw = drawTriangle;
  this.size = 100;
}

function drawTriangle() {
  requestAnimationFrame(drawTriangle.bind(this));
  var x = 0;
  var y = 0;
  var centerX = this.canv.width / 2;
  var centerY = this.canv.height / 4;
  this.phase += 0.005 * tau;

  if (this.first == 1) {
    this.ctx.clearRect(0, 0, this.canv.width, this.canv.height);
  }
  this.ctx.beginPath();
  for (var i = 0; i <= this.sides; i++) {
    this.ctx[i ? 'lineTo' : 'moveTo'](
      centerX + this.size * Math.cos(this.phase + i / this.sides * tau),
      centerY + this.size * Math.sin(this.phase + i / this.sides * tau)
    );
  }
  this.ctx.strokeStyle = '#dda36b';
  this.ctx.stroke();
  this.size--;
}

var collection = [];

var triangle1 = new Triangle(canvas, context, 3, 1);
triangle1.draw();

var i = 0;

function nextFrame() {
  if (i < 1000) {
    collection[i] = new Triangle(canvas, context, 3, 0);
    collection[i].draw();
    i++;
    setTimeout(nextFrame, 500);
  }
}
setTimeout(nextFrame, 0);

body {
  background-color: #19191b
}

<div align="center">
  <button id="test">Test button that needed some text to make it longer</button>
  <br>
</div>
<div>
  <canvas></canvas>
</div>

所以这个按钮占据了整个屏幕的宽度，你看不到它下面的任何东西。我希望 div 是透明的，这样您就可以看到它下面的三角形。

Answer 1

使用position:absolute so you can freely position elements in their parent element with top or bottom and left or right. This allows HTML elements to overlap. Make sure that those elements you want to be in the foreground come after those you want to be in the background (or alternatively, use the z-indexCSS属性).

这是您的代码，为了更快获得结果而稍作修改。我没有更改 JS 部分中的任何内容（只是删除了调整大小的代码，以便更快地看到演示的行为）。有趣的是下面 CSS 和 HTML 的变化。

var canvas = document.querySelector('.mycanvas');
var context = canvas.getContext('2d');
var tau = 2 * Math.PI;

function Triangle(canvs, cnt, sid, f) {
  this.phase = 0;
  this.ctx = canvs.getContext('2d');
  this.first = f;
  this.sides = sid;
  this.canv = canvs;
  this.draw = drawTriangle;
  this.size = 100;
}

function drawTriangle() {
  requestAnimationFrame(drawTriangle.bind(this));
  var x = 0;
  var y = 0;
  var centerX = this.canv.width / 2;
  var centerY = this.canv.height / 4;
  this.phase += 0.005 * tau;

  if (this.first == 1) {
    this.ctx.clearRect(0, 0, this.canv.width, this.canv.height);
  }
  this.ctx.beginPath();
  for (var i = 0; i <= this.sides; i++) {
    this.ctx[i ? 'lineTo' : 'moveTo'](
      centerX + this.size * Math.cos(this.phase + i / this.sides * tau),
      centerY + this.size * Math.sin(this.phase + i / this.sides * tau)
    );
  }
  this.ctx.strokeStyle = '#dda36b';
  this.ctx.stroke();
  this.size--;
}

var collection = [];

var triangle1 = new Triangle(canvas, context, 3, 1);
triangle1.draw();

var i = 0;

function nextFrame() {
  if (i < 1000) {
    collection[i] = new Triangle(canvas, context, 3, 0);
    collection[i].draw();
    i++;
    setTimeout(nextFrame, 500);
  }
}
setTimeout(nextFrame, 0);

.mycanvas {
  position:absolute;
  background-color: #19191b
}
.mydiv {
   position:absolute;
   left:100px;
   top:30px;
   opacity:0.5;
   background-color: rgb(100, 100, 200);
}

<div>
    <div>
      <canvas class="mycanvas"></canvas>
    </div>
    <div class="mydiv">
       Hello World!
    </div>
</div>

在 canvas 上放置 50% 透明 div，这样 canvas 仍然可见

placing 50% transparent div over canvas so canvas is still visible

html

css

canvas

html5-canvas