Question

我来自AS3 OOP到HTML5，这有点让我困惑;

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

<canvas id = "ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>

<script>

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

ctx.font = '30px Arial';        
ctx.fillStyle = 'red';       
ctx.globalAlpha = 0.5;  

ctx.fillText('Hello',50,50);   

</script>

根据我的理解，在＆lt;脚本＆gt;我们＆＃34; import＆＃34;在第一行中的canvas对象，然后我们设置它的属性并在以下行中绘制文本。现在，每次我做

ctx.fillText();

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

现在，我正在尝试创建一个这样的新对象：

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

它没有做任何事情，我试图创建这个对象，以避免从ctx对象（样式，字体等）继承属性。我很欣赏有关此类OOP的一些新信息，感谢您抽出时间。

Answer 1

javascript的所有内容MDN的良好参考来源，在您的情况下，您之后的页面标题为Applying styles and colors [画布]

相关部分是

注意：设置strokeStyle和/或fillStyle属性时，新值将成为从那时起绘制的所有形状的默认值。对于您想要的不同颜色的每个形状，您需要重新分配fillStyle或strokeStyle属性。

我认为这同样适用于font。

Answer 2

你需要做的是创建一个你定义的新对象，所以textobject会存储它的字符串，位置等等。

然后你可以像创建一个类或一个对象一样创建一个textObject。

这是一个简单的例子jsFiddle：https://jsfiddle.net/CanvasCode/bbfgmpvk/1/

的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();

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

2 个答案: