1

私はjavascriptを初めて使用し、エラーが発生しています。私はいくつかの基本的な概念をスキップしていると確信しています...ごめんなさい。

ここに問題があります。

私は自分のhtmlでこのコードを使用しています：

<div>
<script type='text/javascript'>
var myCanvas = document.getElementsByTagName("canvas");
document.write('<img src="'+myCanvas[0].toDataURL("image/png")+'"/>');

</script></div>

ドキュメントにキャンバスが1つだけあります。私がクロームで見るエラーは次のとおりです。

Uncaught TypeError: Cannot read property '0' of undefined sankey.html:128 (anonymous function)

入ったら

document.write('<img src="'+myCanvas[0].toDataURL("image/png")+'"/>');

（まったく同じ行）javaスクリプトクロームコンソールでは、それは動作します！これはどのように可能ですか？

4

1 に答える 1

4

あなたは忘れました[0]：

var myCanvas = document.getElementsByTagName("canvas")[0];

getElementsByTagName要素の配列を返します。その中から1つを選択する必要があります。（配列に要素が1つしかない場合でも）

これを行う「よりクリーンな」方法はid="myCanvas"、キャンバスにid（）を設定し、を使用するgetElementByIdことですが、使用しているキャンバスは1つだけなので、機能しgetElementsByTagNameます。

返された理由undefinedは、おそらく、キャンバスがロードされる前にコードが実行されたためです。
コードを関数でラップしてから、関数を「ロード」イベントに登録します

<script type='text/javascript'>
    var myCanvas;

    function initCanvas(){
        myCanvas = document.getElementsByTagName("canvas");
        document.write('<img src="'+myCanvas[0].toDataURL("image/png")+'"/>');
    }

    window.addEventListener('load', initCanvas, false);
</script>
于 2012-11-29T10:53:18.243 に答える