пытается анимировать на javascript canvas

Question

как заголовок сказал, что я пытаюсь анимировать на java-холсте, но я не уверен, как добавить к векторному классу моих объектов текущую позицию Мне сказали использовать это:

Bus.prototype.update = function() 
{ 
    this.getPosition().add(new Vector(10.0)); 
} 

, но он не признает .Add функцию и приходит с ошибкой, когда я использую setInterval функцию

Я буду включать мои прибудете/набор функций Aswell просто упаковывают

Bus.prototype.getPosition = function() {  
    return this.mPosition; 
}; 
Bus.prototype.setPosition = function (pPosition) { 
    this.mPosition = pPosition; 
}; 

Я довольно новый при кодировании, так что я прошу прощения, если это очень расплывчато или плохо написана

Answer 1

jsFiddle: https://jsfiddle.net/CanvasCode/41z9o10p/1/

JavaScript

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

var Bear = function(xSet, ySet) 
{ 
    this.XPos = xSet; 
    this.YPos = ySet; 
} 

Bear.prototype.updatePosition = function(xValue, yValue) 
{ 
    this.XPos += xValue; 
    this.YPos += yValue; 
} 

var bear = new Bear(0,0); 

setInterval(function() 
      { 
    ctx.fillStyle = "#000"; 
    ctx.fillRect(0,0,c.width,c.height); 
    ctx.fillStyle = "#0F0"; 
    ctx.fillRect(bear.XPos, bear.YPos, 50,50); 

    bear.updatePosition(0.2, 0.4); 
} ,1); 

Медведь обычай «класс». Все медведь имеет позицию X и позицию Y, конструктор может принимать два значения, которые задают значения X и Y. Затем я добавляю новый метод к Bear, который называется updatePosition. Все updatePosition принимает два значения и добавляет их в исходную позицию X и позицию Y (вы также можете указать отрицательные числа для перемещения противоположного пути). Теперь с нашим Медведем мы можем создать его, а затем использовать его функцию updatePosition и переместить его.