TypeError:无法调用null的方法'getContext'(匿名函数)

时间:2012-05-18 21:48:59

标签: javascript canvas typeerror

我是初学者,之前没有真正做过任何JavaScript,所以我希望你能帮助我。我制作了一个画布,让用户可以选择带有单选按钮的形状和颜色,然后将其绘制到画布上。我还添加了一个复选框,其中包含为所选颜色添加渐变的选项。这是程序: http://people.dsv.su.se/~caak1743/Canvas/canvas.html

现在我不想这样做,以便可以在画布区域周围拖放形状。我发现一个代码,我认为可以改变我的程序,但我不断得到: TypeError:无法调用null的方法'getContext' 在里面 该行的(匿名函数):

     var ctx = canvas.getContext("2d");

我不知道出了什么问题或者我怎么解决它。我试过寻找类似问题的类似程序,但没有找到我可以在这里申请的任何东西。这是我试图与我合并的代码:

    function init() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    return setInterval(draw, 10);
    }

    function draw() {
    clear();
    ctx.fillStyle = "#FAF7F8";
    rectangle(0,0,WIDTH,HEIGHT);
    ctx.fillStyle = "#444444";
    rectangle();
    }

    function myMove(e){
    if (dragok){
    x = e.pageX - canvas.offsetLeft;
    y = e.pageY - canvas.offsetTop;
    }
    }

    function myDown(e){
    if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
    canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
    e.pageY > y -15 + canvas.offsetTop){
    x = e.pageX - canvas.offsetLeft;
    y = e.pageY - canvas.offsetTop;
    dragok = true;
    canvas.onmousemove = myMove;
    }
    }

    function myUp(){
    dragok = false;
    canvas.onmousemove = null;
    }

    init();
    canvas.onmousedown = myDown;
    canvas.onmouseup = myUp;

4 个答案:

答案 0 :(得分:17)

只需更正以下内容:

<script type="text/javascript">
window.onLoad=function(){ init();};
  function init() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    return setInterval(draw, 10);
  }

  function draw() {
    clear();
    ctx.fillStyle = "#FAF7F8";
    rectangle(0,0,WIDTH,HEIGHT);
    ctx.fillStyle = "#444444";
    rectangle();
  }

  function myMove(e) {
    if (dragok) {
      x = e.pageX - canvas.offsetLeft;
      y = e.pageY - canvas.offsetTop;
    }
  }

  function myDown(e) {
    if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
        canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
        e.pageY > y -15 + canvas.offsetTop) {
      x = e.pageX - canvas.offsetLeft;
      y = e.pageY - canvas.offsetTop;
      dragok = true;
      canvas.onmousemove = myMove;
    }
  }

  function myUp() {
    dragok = false;
    canvas.onmousemove = null;
  }

  init();
  canvas.onmousedown = myDown;
  canvas.onmouseup = myUp;
</script>

这应该有效。问题是canvas元素需要准备好运行脚本。由于<script>部分中的<head>在加载<canvas>之前运行,因此会出错。

答案 1 :(得分:3)

我找到了两个解决方案。第一个是向你的页面添加jquery,然后不需要通过将整个js代码包装到

$(document).ready(function() { Your code here });

中来使用in-html js 是什么让代码在html之后运行,或者只是简单地交换头部和主体,而不需要使用in-html js (它比js更早地执行html)。这些应该有用。

答案 2 :(得分:1)

你只需要这样做就可以摆脱错误。 只需在脚本之前添加画布,并始终将脚本放在最后。

<body>
<canvas id="ca"></canvas>

<script type="text/javascript">

    var ca = document.getElementById("ca");
    var co = ca.getContext("2d");

// whatever your code    
</script>
</body> 

答案 3 :(得分:0)

确保您的脚本 AFTER 您的画布元素。