Question

这是代码，（不要杀了我，我刚刚开始研究javascript）... Firefox'errors控制台返回错误“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);

}

通过这种方式它不起作用，我只有一次可以......但如果我写

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！感谢大家，我的第一个问题就是答案了！

Answer 1

您从aggiornacanvas致电setTimeout，但aggiornacanvas需要参数 - id元素的canvas。由于缺少该参数，因此您的变量canvas为null。因此，错误。

将setTimeout更改为使用参数调用aggiornacanvas，方法是将其包装在匿名函数中。

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

但是，圣洁的烟！别这么做！这将一遍又一遍地调用aggiornacanvas而不停止并刺激你的CPU！你想要实现什么目标？

Answer 2

这一行：

setTimeout(aggiornacanvas, 0);

导致在没有参数的情况下调用aggiornacanvas函数。第一次运行时，画布不是null。第二次，它是，并且脚本退出。如果您将其更改为：

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

不会出现空错误，并且会重复调用aggiornacanvas。这里没有对设计发表评论，但可以通过其他人的建议进行改进。

javascript中的“Canvas is null”错误

2 个答案: