&引用；画布为空”；javascript中的错误_Javascript_Html_Canvas

&引用；画布为空”；javascript中的错误

javascript html canvas

&引用；画布为空”；javascript中的错误,javascript,html,canvas,Javascript,Html,Canvas,这是代码，（不要杀我，我刚刚开始学习javascript）…Firefox的错误控制台返回错误“Canvas is null”，但我不明白为什么。我想这可能是因为我传递变量id的方式不好 <html> <canvas id="c1"> Your browser doesn't support canvas! </canvas> <video style="display:none;" id="video1" controls height="600px

这是代码，（不要杀我，我刚刚开始学习javascript）…Firefox的错误控制台返回错误“Canvas is null”，但我不明白为什么。我想这可能是因为我传递变量id的方式不好

<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>

这样它就不起作用了，而且我只有一次还行……但是如果我写的话

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);

}

它起作用了！问题是，我认为行是正确的，所以我不理解为什么它们不起作用：(

更新成功了！这是一个浏览器的问题，不允许在本地访问imagedata！谢谢各位，我的第一个问题已经得到了回答！

您正在从

设置超时调用aggiornacanvas
，但是aggiornacanvas
需要一个参数-您的画布的id
由于缺少该参数，因此变量canvas
为null
。因此出现错误
将setTimeout
更改为使用参数调用aggiornacanvas
，方法是将其包装在匿名函数中
setTimeout(function () {
    aggiornacanvas(id);
}, 0);

但是，天哪！不要这样做！这会一次又一次地调用aggiornacanvas，而不会停止并扣掉你的CPU！你想达到什么目的？
这行：
setTimeout(aggiornacanvas, 0);

正在导致在没有参数的情况下调用aggiornacanvas
函数。第一次运行时，画布不是null
。第二次是，脚本退出。如果将此更改为：
setTimeout(function(){aggiornacanvas('c1')}, 0);

不会出现空错误，并且会重复调用aggiornacanvas
。此处对设计没有任何评论，但可以根据其他人的建议进行改进。
DOMContentLoaded事件是否跨浏览器？尝试将其更改为addEventListener（'load'，function（））我使用的是firefox，我很确定DOMContentLoaded与itI兼容。我不认为这是问题所在，但请使用var
语句！这将在Javascript中为您省去许多麻烦。没有理由每帧按id重新提取画布元素！在开始工作之前，将其保存在变量中，在函数外部离子。（通过闭包的魔力，它将在函数内部可用。）这是不对的。setTimeout
需要函数引用。您正在进行一个返回undefined
的函数调用。函数将立即被调用，并且会出现堆栈溢出。您能告诉我这些建议吗？：（我试着用帆布做一些东西，只是为了锻炼；）我的意思是，你想用0
的超时值递归调用setTimeout做什么？除了测试你的CPU性能…更新视频，但我想我可以将它设置为30或40，因为我不需要这么急，这是一个错误…但还有一个错误…@DxW-你更新的代码应该无法工作，因为您正在立即调用函数，而不是传递函数引用（即，按照我的回答中的建议，将函数调用包装在匿名函数中）。在您的“工作”示例中，您是只收到两次警报还是重复收到警报？
setTimeout(function(){aggiornacanvas('c1')}, 0);