TypeError：无法调用 null 的方法“getContext”（匿名函数）答案

【问题标题】：TypeError: Cannot call method 'getContext' of null (anonymous function)TypeError：无法调用 null 的方法“getContext”（匿名函数）
【发布时间】：2012-05-26 11:19:33
【问题描述】：

我是这方面的初学者，之前还没有真正做过任何 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;

【问题讨论】：

标签： javascript canvas typeerror

【解决方案1】：

只需将其更正为以下内容：

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

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

【讨论】：

你好 Mr@meetar 我可以在 React Native 中使用画布

【解决方案2】：

我找到了两个解决方案。首先是将jquery添加到您的页面，然后通过将整个js代码包装到

中，无需使用in-html js

$(document).ready(function() { <i>Your code here</i> });

是什么让代码在 html 准备好之后运行，或者只是简单地交换头部和主体，不需要使用 in-html js （它比 js 更早地执行 html）。这些应该有效。

【讨论】：

【解决方案3】：

您只需要这样做即可消除错误。只需在脚本之前添加画布，并始终将脚本放在末尾。

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

<script type="text/javascript">

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

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

【讨论】：

【解决方案4】：

确保您的脚本之后是您的画布元素。

【讨论】：