2

現在、Canvas の操作方法を学んでいますが、現在、関数をクラス内に配置しようとして立ち往生しています。

<script>
var c = document.getElementById("c");
var ctx = c.getContext("2d");

var disc = function(x,y,h,w,c1,c2,ctx){
  this.x=x;
  this.y=y;
  this.h=h;
  this.w=w;
  this.c1=c1;
  this.c2=c2;
  this.ctx=ctx;

}

disc.prototype.draw = function() {
  this.ctx.fillStyle=this.c1;
  this.ctx.fillRect(this.x,this.y,this.w,this.h/2);
  this.ctx.fillStyle=this.c2;
  this.ctx.fillRect(this.x,this.y+this.h/2,this.w,this.h/2);
}

disc.prototype.erase = function() {
  this.ctx.clearRect(this.x,this.y,this.w,this.h);
}


d1 = new disc(100,100,20,40,"#ff0000","#0000ff",ctx);

 var dx=1;
 var dy=1;

 function animate() {
      d1.erase();
      d1.x = d1.x + dx;
      d1.y = d1.y + dy;
      if ( d1.x>=500 || d1.x < 50)  { dx = dx * -1; d1.y = 40;}
      d1.draw();

  }

setInterval(animate,1);


</script>

ディスク関数自体の中でアニメーション関数を移動するにはどうすればよいですか? これをディスク関数に挿入しようとしました：

  var dx=1;
  var dy=1;
  animate = function() {
      this.erase();
      this.x = this.x + dx;
      this.y = this.y + dy;
      if ( this.x>=500 || this.x < 50)  { dx = dx * -1; this.y = 40;}
      this.draw();
   }
 this.animate = animate;

変更するだけでなく

setInterval(d1.animate,1);

しかし、それは私に与えます

caught TypeError: Object [object Window] has no method 'erase'
4

1 に答える 1

3

以下のように、関数をprototypeofに追加する必要があります。disc

disc.prototype.animate = function(dx, dy) {
      this.erase();
      this.x = this.x + dx;
      this.y = this.y + dy;
      if ( this.x>=500 || this.x < 50)  { dx = dx * -1; this.y = 40;}
      this.draw();
};

setInterval(function() {
  d1.animate(1, 1);
},1);
于 2012-12-08T04:12:40.203 に答える