Javascript ES6类对象继承

当我使用

console.log（）

时，我会得到画布的上下文

但是，当我在矩形类中使用时

moveTo（10,10）

；我得到

未定义ctx

我怎样才能让它工作

类形状{
建造师（ctx）{
本图绘制（ctx）；
}
抽签（ctx）{
this.ctx=ctx；
}
}
类BaseShape扩展了形状{
构造器（颜色）{
超级（）；
这个颜色=颜色；
}
}
类矩形扩展BaseShape{
构造器（颜色）{
超级（彩色）；
}
}
var c=document.getElementById（“画布”）；
var x=c.getContext（“2d”）；
var rec=新矩形（“绿色”）；
记录图（x）；
控制台日志（rec）；

矩形类

class Rectangle extends BaseShape {
  constructor(color) {
    super(color);
  }

  draw(ctx) {
    ctx.moveTo(10, 10);
    ctx.lineTo(10, 100);
    ctx.stroke();
    ctx.strokeStyle = color;
  }
}

---

创建

Rectangle

类（

new Rectangle（“绿色”）

）的实例时，

Rectangle

构造函数调用

BaseShape

构造函数，该构造函数调用

Shape

构造函数时不带参数（因此

ctx

变为

未定义的
），它调用
Rectangle.prototype.draw（）
方法。由于
ctx
是
未定义的
，因此会出现错误。
不应将上下文保存到对象。我将把它传递到
draw
方法中。Java的
JComponent.paintComponent
方法采用
Graphics
参数

因此，在JavaScript中，应该将
canvasrendingcontext2d
传递到draw方法中

我在下面提供了正方形和三角形等示例形状


类抽象形状{
建造师（来源）{
this.origin=origin；
}
}
类DrawableShape扩展了AbstractShape{
构造器（原点、颜色、填充）{
超级（原产地）；
this.color=color | |'#000'；
this.fill=fill | |'#FFF'；
}
抽签（ctx）{
ctx.save（）；
ctx.strokeStyle=this.color；
ctx.fillStyle=this.fill；
ctx.imageSmoothingEnabled=真；
这是onRedraw（ctx）；
ctx.restore（）；
}
}
类矩形扩展了DrawableShape{
构造（原点、宽度、高度、颜色、填充）{
超级（产地、颜色、填充）；
这个。宽度=宽度；
高度=高度；
}
onRedraw（ctx）{
ctx.beginPath（）；
ctx.moveTo（this.origin.x，this.origin.y）；
ctx.lineTo（this.origin.x+this.width，this.origin.y）；
ctx.lineTo（this.origin.x+this.width，this.origin.y+this.height）；
ctx.lineTo（this.origin.x，this.origin.y+this.height）；
ctx.lineTo（this.origin.x，this.origin.y）；
ctx.fill（）；
ctx.stroke（）；
}
}
类Square扩展矩形{
构造（原点、大小、颜色、填充）{
超级（来源、大小、大小、颜色、填充）；
}
}
类三角形扩展了DrawableShape{
构造（原点、宽度、高度、颜色、填充）{
超级（产地、颜色、填充）；
这个。宽度=宽度；
高度=高度；
}
onRedraw（ctx）{
ctx.beginPath（）；
ctx.moveTo（this.origin.x+this.width/2，this.origin.y）；
ctx.lineTo（this.origin.x+this.width，this.origin.y+this.height）；
ctx.lineTo（this.origin.x，this.origin.y+this.height）；
ctx.lineTo（this.origin.x+this.width/2，this.origin.y）；
ctx.fill（）；
ctx.stroke（）；
}
}
类等边三角形延伸三角形{
构造（原点、大小、颜色、填充）{
超级（产地、尺寸*1.1339741、尺寸、颜色、填充）；
}
}
var ctx=document.getElementById（'draw'）.getContext（'2d'）；
var rec=新矩形（{x:10，y:10}，60100，#F00'，#0FF'）；
var tri=新的等边三角形（{x:100，y:10}，100'，#00F'，#FF0'）；
var sqa=新的平方（{x:240，y:10}，100）；
记录图纸（ctx）；
三次牵引（ctx）；
sqa图纸（ctx）
看起来像是您交换了绘图和构造函数。应该在构造函数中设置上下文，然后在draw方法中绘制。。。一旦在构造函数中设置了上下文，就不需要将其传递给draw方法。您的
Recangle
类既没有
moveTo
也没有
draw
方法？请向我们展示您的全部代码。这是我的代码，稍后我将添加一个额外的类圆，这就是我希望从Shapeye扩展的原因，但是当我对矩形进行console.log时，我得到了画布。Idk我如何从上面的2开始绘制矩形Classes@olalalaa1599
console.log（rec）
应该记录
未定义的
，因为
新矩形（“绿色”）
会引发错误。我认为您没有显示所有相关代码。