Question

我无法将div放在canvas上canvas仍然可见的地方。我只能将div放在canvas上，但隐藏canvas。如果有人有一个可爱的例子。

＆＃13;

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);

＆＃13;

body {
  background-color: #19191b
}

＆＃13;

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

＆＃13;

因此按钮占据屏幕的整个宽度，您无法看到屏幕下方的任何内容。我希望div是透明的，这样你就可以看到它下面的三角形。

Answer 1

使用position:absolute，以便您可以使用top或bottom以及left或right在其父元素中自由定位元素。这允许HTML元素重叠。确保您想要在前台的那些元素位于您想要在后台的元素之后（或者使用z-index CSS属性）。

这是您的代码稍作修改，以获得更快的结果。我没有在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>

在画布上放置50％透明div，使画布仍然可见

1 个答案: