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

【问题标题】：Create canvas using jquery dynamically (on the fly in memory)使用 jquery 动态创建画布（在内存中动态创建）
【发布时间】：2013-04-04 00:20:52
【问题描述】：

我一直在研究有关动态画布创建的类似问题（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>

【问题讨论】：

标签： jquery html html5-canvas

【解决方案1】：

什么都没有发生，因为您没有附加画布本身，而是附加了它的标记。画布的内容不能用 HTML 表示，所以标记只是一个空的画布标签。

所以不要附加外层HTML，而是附加元素本身。

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

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

【讨论】：