2012-01-19 30 views
2

これはコードです(私を殺さないでください、私はちょうどJavaScriptを勉強し始めました)... Firefox'errorsコンソールは私にエラー「Canvas is null」を返しますが、私はなぜか理解していない。私は多分それが悪い方法で変数IDを渡した原因かもしれないと思います。javascriptの「Canvas is null」エラー

<html> 
<canvas id="c1"> 
Your browser doesn't support canvas! 
</canvas> 

<video style="display:none;" id="video1" controls height="600px" width="800px" > 
<source src="videos/movie.mp4" type="vide/mp4" > 
<source src="videos/movie.ogv" type='video/ogg; codecs="theora, vorbis"'/> 
<source src="videos/movie.webm" type='video/webm' > 
</video> 


<script type="text/javascript"> 

document.addEventListener('DOMContentLoaded', function() { 

    video = document.getElementById("video1"); 
    video.height = 600; 
    video.width = 400; 
    video.play(); 
    aggiornacanvas("c1"); 

    function aggiornacanvas(id) { 
     canvas = document.getElementById(id); 
     canvasContext = canvas.getContext("2d"); 
     canvasContext.drawImage(video, 0, 0); 
     data = canvasContext.getImageData(0, 0, canvas.width, canvas.height); 

     //Modificare qui i dati dell'immagine 
     canvasContext.putImageData(data, 0, 0); 
     setTimeout(aggiornacanvas, 0); 

    } 




}, false);  


</script> 
</html> 

[OK]を、今では動作しますが、別のエラーがこの方法、それはない作品で

function aggiornacanvas(id) 
{ 
    canvas = document.getElementById(id); 
    canvasContext = canvas.getContext("2d"); 
    canvasContext.drawImage(video,0,0); 
    var data = canvasContext.getImageData(0,0,canvas.width,canvas.height); 
    alert("ok");  
    canvasContext.putImageData(data,0,0); 
    setTimeout(aggiornacanvas(id),40); 

} 

があり、私は大丈夫一つだけの時間を取得...しかし、私は

function aggiornacanvas(id) 
{ 
    canvas = document.getElementById(id); 
    canvasContext = canvas.getContext("2d"); 
    canvasContext.drawImage(video,0,0); 
    //var data = canvasContext.getImageData(0,0,canvas.width,canvas.height); 
    alert("ok");  
    //canvasContext.putImageData(data,0,0); 
    setTimeout(aggiornacanvas(id),40); 

} 
を書く場合

それは働く!問題は、私はラインが、それは彼らを聖霊降臨祭は動作しませんなぜ私は理解できないcorrenctであることを考えるということです:(

UPDATEDそれは動作します!それはローカルでimagedataにアクセスすることを許可しないブラウザの問題でした!皆さん、ありがとうございました。そこに私の最初の質問は答えられました!

+1

お使いのブラウザはどちらですか? – Ryan

+0

はDOMContentLoadedイベントのクロスブラウザですか? addEventListener( 'load'、function())に変更してみてください – chchrist

+0

私はfirefoxを使用していますが、DOMContentLoadedは互換性があると確信しています。 – DxW

答えて

3
あなたの setTimeoutから aggiornacanvasを呼び出している

が、aggiornacanvasはパラメータが必要 - あなたのcanvas要素のid。そのパラメータがないので、変数canvasnullです。したがって、エラー。

setTimeoutを変更して、aggiornacanvasにパラメータを指定して、無名関数でラップします。

setTimeout(function() { 
    aggiornacanvas(id); 
}, 0); 

しかし、聖なる煙!それをしないでください!これにより、CPUを停止してスパイクすることなく、aggiornacanvasが繰り返し呼び出されます!あなたは何を達成しようとしていますか?

+0

私は運動のためにのみキャンバスをしようとしています;) – DxW

+1

私は、 'setTimeout'を再帰的にタイムアウトで呼び出すことで何をしようとしているのですか?値は '0'ですか?あなたのCPU性能をテストする以外に... – gilly3

+0

ビデオをアップデートしていますが、私はこの緊急性を必要としないので、30または40に設定することができます。エラーです... 他にエラーがあります... – DxW

2

この行:

setTimeout(aggiornacanvas, 0); 

は、パラメータなしで呼び出されるaggiornacanvas機能を引き起こしています。初めて実行すると、キャンバスはnullではありません。 2回目ですが、スクリプトが終了します。あなたがこれを変更した場合:

setTimeout(function(){aggiornacanvas('c1')}, 0); 

がnullのエラーではありませんし、aggiornacanvasが繰り返し呼び出されます。ここでのデザインに対するコメントはありませんが、他人の提案によって改善される場合があります。

+1

それは正しくありません。 'setTimeout'は関数参照を必要とします。 'undefined'を返す関数呼び出しをしています。関数がすぐに呼び出され、スタックオーバーフローが発生します。 – gilly3

+0

これらの提案をお願いしますか? :( – DxW

+0

@ gilly3ああ、ありがとうございました。 – paislee