Добавление изображения ul li на html5 холст

Question

У меня есть три тега li в теге ul, каждый из которых содержит изображение внутри него. У меня есть тег canvas. Я пытаюсь поставить ul внутри canvas, но затем ничего не появляется. Это мой код.

<canvas> 
    <ul> 
    <li><img src="1.jpg" /></li> 
    <li><img src="2.jpg" /></li> 
    <li><img src="13.jpg" /></li> 
    </ul> 
</canvas> 

Когда я поместить ul снаружи, все показывает вверх. Я хочу отобразить целое ul в пределах canvas. Является ли это возможным? Если возможно, то как? Благодаря!

Answer 1

Элементы HTML не могут быть размещены внутри элементов холста (и ожидается, что они будут показаны). Они будут интерпретироваться как текст и отображаться, если браузер не поддерживает элемент холста.

С учетом сказанного вы можете сложить элементы туда, где они, вероятно, похожи на цель, которую вы пытаетесь достичь.

Если вы используете одни и те же размеры, тот же top & left положение, и оба имеют position:absolute, вы можете поместить элемент, который вы хотите на вершине после другого в HTML. В демо, я поставил холст после ul так он находится на верхнем

ul, canvas { 
    position:absolute; 
    top:0; left:0; 
    width:100px; height:100px; 
} 

Demo

Используя ту же технику, вы можете сделать один появляются над другими, придав ему более высокую z-index значения независимо от того, его положение в HTML. Demo using z-index