0

動的キャンバスの作成 ( 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>
4

1 に答える 1