Question

我一直在研究有关动态画布创建的类似问题（1，2），但他们假设画布已经在DOM中。但是，如果我想在运行中创建和绘制画布（换句话说，DOM中没有画布或任何其他父元素），该怎么办？

有些事情（这不起作用）：

<!DOCTYPE HTML>
<html>
<head>
    <title>canvas test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            for (var i = 0; i < 3; i++) {
                var canvas = $('<canvas />').attr({
                        id: "canvas" + i,
                        width: 20,
                        height: 20
                    });

                var ctx = $(canvas)[0].getContext('2d');
                ctx.fillStyle = "#000";
                ctx.fillRect(0, 0, 20, 20);
                $("#events").append("<tr><td>" + canvas[0].outerHTML + "</td></tr>");
            }
        });
    </script>
</head>
<body>
    <table id="events">
        <tr>
            <th>Canvas</th>
        </tr>
    </table>
</body>
</html>

Answer 1

没有任何事情发生，因为你没有附加画布本身而是它的标记。画布的内容不能用HTML表示，因此标记只是一个空的画布标记。

因此，不要附加outerHTML，而是附加元素本身。

$("<tr><td></td></tr>").appendTo( '#events' ).find( 'td' ).append( canvas );

演示：http://jsfiddle.net/2Lr5h/

动态地使用jquery创建画布（在内存中动态）

1 个答案: