Я обнаружил, что использование прототипов очень полезно здесь. Если вы не знакомы с ними, прототипы являются частью объектов, которые позволяют вам устанавливать свои собственные переменные и / или методы.
Делать что-то вроде:
Image.prototype.position = {
x: 0,
y: 0
}
Image.prototype.onload = function(){
context.drawImage(this, this.position.x, this.position.y);
}
позволяет вам устанавливать положение и рисовать на холсте без особых усилий.
Переменная "position" позволяет вам перемещать ее по холсту.
Так что можно сделать:
var myImg = new Image();
myImg.position.x = 20;
myImg.position.y = 200;
myImg.src = "http://www.google.com/intl/en_ALL/images/logo.gif";
, и изображение автоматически отобразится на холсте в (20 200).
Прототип работает для всех объектов HTML и нативных Javascript. Так
Array.prototype.sum = function(){
var _sum = 0.0;
for (var i=0; i<this.length; i++){
_sum += parseFloat(this[i]);
}
return _sum;
}
дает новую функцию всем массивам.
Однако,
var Bob;
Bob.Prototype.sayHi = function(){
alert("Hello there.");
}
не будет работать (по нескольким причинам, но я просто расскажу о прототипах).
Prototype - это своего рода «свойство», которое содержит все ваши свойства / методы, которые вы вводите, и уже присутствует в каждом из объектов HTML и нативных объектов Javascript (не тех, которые вы создаете).
Прототипы также позволяют легко вызывать (вы можете сделать «myImg.position.x» вместо «myImg.prototype.position.x»).
Кроме того, если вы определяете переменную, вы должны сделать это примерно так.
var Bob = function(){
this.sayHi = function(){
alert("Hello there.");
}
}