Question

我试图制作一个刽子手游戏，当一个字母被选中时，使用画布画出画眉和男人。我已经建立了一个＆＃39; Part＆＃39;包含重要属性的类以及绘制零件的方法。但是，对于绘制身体部位，每条线都将在相同的x坐标上开始。所以，我试图制作一个BodyPart＆＃39;构造函数，它是Part构造函数的子元素，为每个BodyPart保留相同的x坐标。但是，当我打电话给'＆＃39; draw＆＃39;对身体部位的方法，它不起作用。这是我的代码：

function Part(x,y, diffFromCenter, y2) {
    this.x = x;
    this.y = y;
    this.x2 = this.x + diffFromCenter;
    this.y2 = y2;
    this.draw = function() {
        context.beginPath();
        context.lineWidth = 3;
        context.moveTo(this.x, this.y);
        context.lineTo(this.x2, this.y2);
        context.stroke();
    };
}

function BodyPart(y,diffFromCenter,y2) {
    this.x = canvas.width/2;
}

BodyPart.prototype = new Part();

var torso = new BodyPart(50,0,100);
var leftArm = new BodyPart(50,-25,75);
var rightArm = new BodyPart(50,25,75);
var leftLeg = new BodyPart(100,-25,130);
var rightLeg = new BodyPart(100,25,130);
var head = {
    x: canvas.width/2,
    y: 35,
    radius: 15,
    draw: function() {
        context.beginPath();
        context.lineWidth = 3;
        context.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
        context.stroke();
    }
};

var body = [head, torso, leftArm, rightArm, leftLeg, rightLeg];

for (var i = 0; i < body.length; i++) {
    body[i].draw();
}

我有头脑＆＃39;因为它是一个弧形，因为它在自己的对象中。我只是不明白为什么来自＆＃39; Part＆＃39;的属性和方法。没有被BodyPart＆＃39;继承。 for循环绘制对象。

要访问画布，我执行了以下操作：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

Answer 1

您的问题是，在创建Part时，您没有调用BodyPart构造函数。如果您将BodyPart更改为如下所示：

function BodyPart(y, diffFromCenter, y2) {
    this.x = canvas.width/2;
    Part.call(this, this.x, y, diffFromCenter, y2);
}

然后它应该有效，因为您在Part设置为新this的情况下调用BodyPart。

这里有一个jsfiddle，显示它正常工作。

Javascript从类继承属性和方法？

1 个答案: