3

Я размещаю div внутри элемента холста, как показано ниже:

<canvas>
    <div></div>
</canvas>

Здесь у них обоих есть высота и ширина. Но здесь я не вижу div!

Разве нельзя использовать div или p на canvas?

Свободный перевод вопроса Placing a div within a canvas от участника @thecodeparadox.

1

3 ответа 3

4

Вы не можете размещать элементы внутри canvas (и отображать оба элемента); они отображаются только в том случае, если браузер не понимает элемент canvas.

Если вы хотите расположить элементы в той же области, что и canvas, вот один из множества способов, который позволит вам это сделать:

HTML

<div id="canvas-wrap">
  <canvas width="800" height="600"></canvas>
  <div id="overlay"></div>
</div>

CSS

#canvas-wrap { position:relative } /* Сделайте это позиционированным родителем */
#overlay     { position:absolute; top:20px; left:30px; } 

Вот еще один метод, который позволяет содержимому div нормально перемещаться и делает canvas фоном для содержимого:

CSS

#canvas-wrap { position:relative; width:800px; height:600px }
#canvas-wrap canvas { position:absolute; top:0; left:0; z-index:0 }

Свободный перевод ответа от участника @Phrogz.

2

Вот еще один метод, который позволяет содержимому div нормально перемещаться и делает canvas фоном для содержимого:

CSS

> #canvas-wrap { position:relative; width:800px; height:600px }
> #canvas-wrap canvas { position:absolute; top:0; left:0; z-index:0 }

Попробовал этот вариант реализовать, когда canvas находится внутри div

<div id="canvas-wrap">
  <canvas id="myCanvas" width="300" height="350"></canvas>
  <div id="overlay"></div>
</div>

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img1 = new Image();
img1.src = "https://i.stack.imgur.com/FPcfs.jpg";
img1.onload = drawImages;

function drawImages() {
 context.drawImage(img1, 20, 20, 300, 350);
}
#canvas-wrap { position:relative; width:400px; height:400px;border:1px solid; }
#canvas-wrap canvas { position:absolute; top:0; left:0; }
#overlay {
position:relative;
margin:2em;
width:50px;
height:50px;
border-radius:50%;
background:gold;
}
<div id="canvas-wrap">
  <canvas id="myCanvas" width="300" height="350"></canvas>
  <div id="overlay"></div>
</div>

2
  • 1
    По большому счету canvas - это изображение, динамически создаваемое, но просто изображение. В итоге вопрос звучит так: как разместить <div> внутри <img>. Визуально <canvas> имеет закрывающий тег и якобы отличается от <img>, но Custom Elements обязаны иметь закрывающий парный тег, а кастомность здесь - условие для обратной совместимости для браузеров, не поддерживающих Canvas. Так, что это условность. Поэтому насколько можно считать "натягиванием" других элементов на холст размещением в нем? Ровно настолько, насколько элемент размещается в <img>.
    – Leonid
    8 дек 2021 в 18:01
  • @Leonid Кстати ты заметил, что это была реализация варианта из ответа EnSO? Также мне это очень напомнило, когда SVG оборачивается в DIV 8 дек 2021 в 18:24
1

Содержимое между открывающим и закрывающим тегами <canvas> будет проигнорировано браузером, если поддерживается Canvas API. В противном случае тег будет распознан, как пользовательский (теперь уже невалидный пользовательский, т.к. не содержит -) со стилями и поведением inline элемента (по умолчанию).

<canva><div>Ваш браузер не поддерживает тег <i>canvas</i>.<br> Установите современный браузер и наслаждайтесь крутыми фишками.<br> <a href="https://www.google.com/chrome/">Скачать правильный браузер!</a></div></canva>
<canvas><div>Canvas игнорирует "содержимое"</div></canvas>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.