Canvas 帆布百慕大圈

我试图让画布画一个圆圈，当用户创建一个点击事件时，我只是使用下面代码中使用的方法创建了一些东西，如下所示：

现在我尝试用同样的方法做一个简单的圆，但是我的x和y变量显示得不精确，即使我在使用之前已经清楚地声明了它们。我想既然beginPath（）和storke（）是一个方法，那可能就是问题所在。我不知道如何向他们提供关于外部范围的信息。我不知所措。这是代码笔：

下面是代码：

window.onload = init();

function init(){
  this.canvas = document.getElementById('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  this.context = canvas.getContext('2d');

  return canvas, context;
}

function circle(){
  this.init = init();
  this.radius = 20;

  canvas.addEventListener('click', clickHandler, false); 

  function clickHandler (event){

    this.x = event.clientX;
    this.y = event.clientY;

    context.beginPath();
    context.strokeStyle = 'DeepSkyBlue';

    context.arc(x, y, radius, 0, Math.PI * 2);
    context.stroke();

    return clickHandler;
  }
  var click = clickHandler();
}
circle();

---

甚至在窗口完全加载之前，您正在执行

circle（）

，因此画布引用尚未初始化。解决方法是将代码包装在

window.onload=function（）{…所有代码…}中。谢谢你的帮助标记！