Javascript Canvas +对象/功能

Posted 2021-05-02

我正在尝试自学javascript，所以我决定用html5和canvas做一个项目，但是我的代码中遇到了一个我无法弄清楚的错误。我将我的上下文声明为变量c，但在引用c的任何函数和对象定义中，诸如c.beginPath（）之类的东西都显示为未定义。但是，如果这样的引用可以在函数之外工作。我非常密切地关注画布上的在线教程，我看不出我正在做什么和教程正在做什么会使我的代码无法运行。我的大部分代码都在下面，调用draw方法会给我带来麻烦。任何帮助，将不胜感激！

var canvas = document.querySelector('canvas');

var w = window.innerWidth;
var h = window.innerHeight
canvas.width = w;
canvas.height = h;

var c = canvas.getContext('2d');

// circle object
function Circle(x, y, dx, dy, r, color) {
  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.r = r;
  this.color = color;

  this.draw = function() {
    c.beginPath();
    c.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
    c.strokeStyle = this.color;
    c.stroke();
    c.fill();
  }

  this.update = function() {
    if (this.x + this.r > w || this.x - this.r < 0) {
      this.dx = -this.dx;
    }
    if (this.y + this.r > h || this.y - this.r < 0) {
      this.dy = -this.dy;
    }

    this.x += this.dx;
    this.y += this.dy;

    this.draw();
  }
}

<canvas></canvas>

答案

有些事你不做我相信可能让你感到困惑。

你有一个类似Circle的结构。我猜这是给你的代码的意图，但你没有在任何地方创建该类的实例。

您需要创建该类的新引用，然后在新对象中调用您想要该类的方法。

我用你自己的代码为你写了一个小提琴。

像这样的东西：

var j = new Circle(100, 100, 200, 200, 20, 'red');
j.draw();

https://jsfiddle.net/wu3dcyfm/