在画布上绘制时，“未捕获的类型错误:无法读取未定义的属性'getContext'”

"Uncaught TypeError: Cannot read property 'getContext' of undefined" when drawing on canvas

本文关键字：读取 属性 getContext 错误 未定义 类型 绘制      更新时间：2023-09-26

每当我调用应该在画布上画一个圆的函数时，我都会收到上述错误。错误发生在"我的文档"var ctx = c.getContext("2d");布局如下的行上：

应该画圆的函数在头部：

function circleTrans() {
  var c = $(this).find('canvas')[0];
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95,50,40,0,2*Math.PI);
  ctx.stroke();
}

调用函数的事件也在上述之后的头部中：

$(".projectContainer").click(function(){
  circleTrans();
});

因此，当单击多个"projectContainer"div之一时，相应div中的画布应绘制一个圆圈。下面是项目容器的位置，稍后在正文中：

    <div class="projectContainer" name="Film Festival">
        <canvas class="canvases"></canvas>
    </div>

有人知道错误的原因吗？

你调用函数的方式，this不是元素。

像这样引用它以获得正确的this值 

$(".projectContainer").on('click', circleTrans);

正如 Adeneo 所说，this不是元素，还有另一种方式可以传递元素，例如，

$(".projectContainer").click(function(){
  circleTrans(this);
  //pass element-^
});

获取div元素作为参数cthis 

function circleTrans(cthis) {
              //--------^
  var c = $(cthis).find('canvas')[0];
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95,50,40,0,2*Math.PI);
  ctx.stroke();
}
相关文章：