Размещение внутри
Я размещаю div внутри элемента холста, как показано ниже:
<canvas>
<div></div>
</canvas>
Здесь у них обоих есть высота и ширина. Но здесь я не вижу div!
Разве нельзя использовать div или p на canvas?
Свободный перевод вопроса Placing a div within a canvas от участника @thecodeparadox.
Ответы (3 шт):
Автор решения: Alexandr_TT
Вы не можете размещать элементы внутри 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 }
→ Ссылка
Автор решения: Leonid
Содержимое между открывающим и закрывающим тегами <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>
→ Ссылка
Автор решения: Alexandr_TT
Вот еще один метод, который позволяет содержимому 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>
→ Ссылка
Я размещаю div внутри элемента холста, как показано ниже:
<canvas>
<div></div>
</canvas>
Здесь у них обоих есть высота и ширина. Но здесь я не вижу div!
Разве нельзя использовать div или p на canvas?
Свободный перевод вопроса Placing a div within a canvas от участника @thecodeparadox.
Ответы (3 шт):
Вы не можете размещать элементы внутри 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 }
Содержимое между открывающим и закрывающим тегами <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>Вот еще один метод, который позволяет содержимому 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>