Блог

Главная - Вопросы по программированию - Как я могу наложить два элемента canvas друг на друга?

Как я могу наложить два элемента canvas друг на друга?

#html #css #canvas

#HTML #css #canvas

Вопрос:

Я хочу наложить два элемента canvas друг на друга. Я пробовал это, но они всегда отображаются один под другим. Canvas с идентификатором canvas1 должен быть нижней плоскостью, а canvas2 — верхней плоскостью.

 <div class="container">
    <canvas class="canvas" id="canvas1" width="500" height="500"></canvas>
    <canvas class="canvas" id="canvas2" width="500" height="500"></canvas>
</div>
  
 .container {
  display: inline-block;
  position: relative;
  float: left;
}

#canvas1,
#canvas2{
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
}

Ответ №1:

Я добавил свойство position в #canvas1 и использовал z-index свойство. Чем выше значение z-index , тем выше оно будет отображаться. Все, что вам нужно, это чтобы z-index то, что вы хотите сверху, было выше, чем z-index то, что вы хотите внизу.

 #canvas1 {
  position: relative;
  background: black;
  z-index: -1;
}
#canvas2{
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  z-index: 0;
}  
 <!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<div class="container">
    <canvas class="canvas" id="canvas1" width="500" height="500"></canvas>
    <canvas class="canvas" id="canvas2" width="500" height="500"></canvas>
</div>

</body>
</html>

Комментарии:

1. Когда я делаю это, вверху появляется черный элемент canvas (canvas1), а внизу — красный элемент canvas (canvas2). Но я хочу, чтобы они перекрывались.

2. @elli возможно, я чего-то недопонимаю. Вы хотите, чтобы они были слегка прозрачными, чтобы вы могли видеть сквозь перекрывающуюся часть? Если нет, есть ли у вас примерное изображение того, чего вы пытаетесь достичь?

3. Нижний слой должен иметь форму, например прямоугольник. Я хочу загрузить изображение на верхний слой. Вы все равно должны видеть прямоугольник, несмотря на изображение. Вы понимаете, что я имею в виду?

4. Если элементы canvas пусты, они отображаются друг над другом. Но если объект находится внутри элемента canvas, он отображает элементы один под другим.