Javascript - Два разных объекта в одном холсте

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> 

Из того, что я понимаю, внутри < сценария> мы «импорт» холст объекта в первой строке, то мы устанавливаем его свойства и нарисуйте текст в следующих строках. Так что теперь, каждый раз, когда я

ctx.fillText(); 

Он будет наследовать свойства шрифта, размера и стиля объекта CTX и нарисовать новый текст.

Теперь я пытаюсь создать новый объект так:

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

Он не делает ничего, я пытаюсь создать этот объект для того, чтобы избежать наследования свойств от CTX объект (стиль, шрифт и т. д.). Буду признателен за новую информацию об этом виде ООП и благодарю вас за ваше время.

Answer 1

Хороший источник ссылки для всех вещей браузер 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();