1

コードの例、コンテキストを使用してオブジェクトを描画したい。

Firefox 15 でエラーがスローされます。

TypeError: el is null
[Break On This Error]

GetElementById は適切に取得されましたが、エラーがスローされました。ヘッド、スクリプトタグもチェックしていますが、きちんとしています。ヘッドタグにもスクリプトコードを入れていますが、結果は同じです。

これはコードの例です:

<!doctype html>
<html lang="en">
    <head>
        <title>Canvas</title>
        <meta charset="utf-8">  
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
    </head>
    <body>
        <script>
            var el = document.getElementById("myCanvas"); // this thrown empty

            var context = el.getContext("2d");

            context.fillStyle = '#00f';
            context.strokeStyle = '#f00';
            context.lineWidth = 4;

            context.beginPath();
            context.moveTo(10, 10);
            context.lineTo(100, 10);
            context.lineTo(10, 100);
            context.lineTo(10, 10);
            context.fill();
            context.stroke();
            context.closePath(); 
        </script>
        <canvas id="myCanvas" width="600" height="200"></canvas>
    </body>
</html>
4

1 に答える 1

2

キャンバス要素はブロックの後に表示されます。<script>スクリプト コードが実行されるとき、それ ( <canvas>) はまだ DOM にgetElementById()ないため、見つかりません。

<canvas> をスクリプトの前に置いて、もう一度試してください。

DOM は、ページが解析されるにつれて段階的に構築されます。ただし、スクリプト ブロックは、</script>終了タグが見つかるとすぐに評価されます。したがって、スクリプトが実行されたとき<canvas>、ブラウザはまだまったく解釈していません。

于 2012-10-21T13:13:29.190 に答える