如何在Canvas上添加HTML元素呢？

发布于
2016-06-17

下面的代码无法再canvas上显示两个div，要如何做才能在canvas上显示html元素呢？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        #box1{
            width: 100px;
            height: 100px;
            background: paleturquoise;
            position: absolute;
            left: 100px;
            z-index: 2;
        }
        #box2{
            width: 100px;
            height: 100px;
            background: palevioletred;
            position: absolute;
            left: 300px;
            z-index: 2;
        }
        #drawing{
            width: 500px;
            height: 500px;
            position: relative;
            background: transparent;
            z-index: 1;
        }
    </style>
    <body>
        <canvas id="drawing">
            <div id="box1">
                
            </div>
            <div id="box2">
                
            </div>
            
        </canvas>
    </body>
    <script type="text/javascript">
        
    </script>
</html>

html javascript css

阅读 29.9k

4 个回答

得票最新

xiaoboost

7.7k31421

发布于
2016-06-17

✓ 已被采纳

canvas里面不允许嵌套div，如果在里面嵌套了div，会被自动忽略。
如果想让div在canvas上面覆盖显示，可以将div放在canvas的同级，然后将div设置成position:absolute或fixed，通过left和top进行定位。