Question

每当我调用我的函数时，我都会收到上述错误，只需在画布上绘制一个圆圈。行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中的画布应绘制一个圆圈。这是projectContainer的位置，稍后在正文中：

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

有人知道错误的原因吗？

Answer 1

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

像这样引用它来获得this

的正确值

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

Answer 2

正如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();
}

＆＃34;未捕获的TypeError：无法读取属性＆＃39; getContext＆＃39;未定义＆＃34;在画布上画画时

2 个答案: