Javascript-同一画布中的两个不同对象

我从AS3面向对象到HTML5，这让我有点困惑

我有这个代码（到目前为止它是有效的）：

它将继承ctx对象的字体、大小和样式属性，并绘制新文本

现在，我正在尝试创建一个新对象，如下所示：

var x1 = new Object();
x1.fillText('Hello',1,50);

它没有做任何事情，我试图创建这个对象，以避免继承ctx对象的属性（样式、字体等）。

---

我非常感谢您提供有关这种面向对象编程的一些新信息，并感谢您抽出时间。

这是一个很好的javascript参考资料来源，在您的案例中，您所关注的页面标题为[到画布]

有关章节如下：

注意：设置strokeStyle和/或fillStyle特性时，新值将成为从此开始绘制的所有形状的默认值。对于要使用不同颜色的每个形状，都需要重新指定fillStyle或strokeStyle属性

---

我假设这同样适用于

font

您需要做的是创建一个您定义的新对象，因此

textobject

将存储它的字符串、位置等

然后，您可以像创建类或对象一样创建textObject

下面是一个简单的JSFIDLE示例：

Javascript

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

textObject = function(textValue, fontValue, fillStyleValue, xValue, yValue)
{
    this.text = textValue;
    this.font = fontValue;
    this.fillStyle = fillStyleValue;
    this.xPos = xValue;
    this.yPos = yValue;
}

textObject.prototype.Draw = function()
{
    ctx.save();

    ctx.font = this.font;
    ctx.fillStyle = this.fillStyle;
    ctx.fillText(this.text, this.xPos, this.yPos);

    ctx.restore();
}

var textObject1 = new textObject("Hello there", "30px Arial", "#000", 50, 50);
var textObject2 = new textObject("So you want some?", "25px Arial", "#333", 150, 150);
var textObject3 = new textObject("... Text", "20px Arial", "#555", 300, 300);
textObject1.Draw();
textObject2.Draw();
textObject3.Draw();

---

您只是在创建一个新的

对象

（与画布无关）-该对象没有

fillText

方法为什么没有？请解释一下它如何具有与画布相同的功能？因为对象没有该方法。如果您在AS3中编写了相同的代码，您会期望它神奇地拥有一个

fillText

方法吗？当然不会。。。我必须使用一个类来继承这类方法，可能直接从一个sprite类继承。如何使其在Javascript中继承此类函数？这是一个很好的示例，如果显式允许在构造函数中传递字体/填充样式，可能会对OP有所帮助。-否则，这与他们目前的方式没有什么不同。

var x1 = new Object();
x1.fillText('Hello',1,50);

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

textObject = function(textValue, fontValue, fillStyleValue, xValue, yValue)
{
    this.text = textValue;
    this.font = fontValue;
    this.fillStyle = fillStyleValue;
    this.xPos = xValue;
    this.yPos = yValue;
}

textObject.prototype.Draw = function()
{
    ctx.save();

    ctx.font = this.font;
    ctx.fillStyle = this.fillStyle;
    ctx.fillText(this.text, this.xPos, this.yPos);

    ctx.restore();
}

var textObject1 = new textObject("Hello there", "30px Arial", "#000", 50, 50);
var textObject2 = new textObject("So you want some?", "25px Arial", "#333", 150, 150);
var textObject3 = new textObject("... Text", "20px Arial", "#555", 300, 300);
textObject1.Draw();
textObject2.Draw();
textObject3.Draw();