1

html5キャンバスのクラスから画像にアクセスするにはどうすればよいですか? クラスから画像をロードしますが、キャンバスにアクセスして移動するには、アクセスできません。クラスなしでこれを行うことができます。

コードはクラスなしで正常に機能します。

          <script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  var img1_x=10;
  var img1_y=10;
  ctx.font="14px Arial"; 


  //this is how you do classes
 //this is how you do classes
function ClassLoadImages(name1) {
  var img1 = new Image();
  this.x=img1_x;
  this.y=img1_y;
  this.name1=name1;
  img1.src = name1;


  img1.onload = function() {
  ctx.drawImage(img1, img1_x,  img1_y);

 };

//add this
 this.imgElement = img1;
};//func

  ClassLoadImages.prototype.m_move = function(){
     img1_x++;
   img1_y++;
      ctx.drawImage(img.imgElement,  img1_x,   img1_y);
     // ctx.fillText("finished loading " ,10,40);
  };


 function doGameLoop() {

    ctx.clearRect(0,0,600,400);
    img.m_move();
     if (img1_x>30)
     {
          clearInterval(gameLoop);

     }
 }




  var img= new ClassLoadImages('images/image4.jpg');
 gameLoop = setInterval(doGameLoop, 100);
</script>
4

1 に答える 1

1

コンストラクターで作成された画像要素を意味する場合は、 to を追加するだけnew Imageですthis:

//this is how you do classes
function ClassLoadImages(name1) {
    var img1 = new Image();
    this.x=10;
    this.y=10;
    this.name1=name1;
    img1.src = name1;


    img1.onload = function() {
    ctx.drawImage(img1, img1_x,  img1_y);

    };

    //add this
    this.imgElement = img1;
};//func

その後、 を介してオブジェクトから参照できますimg.imgElement。

参照されているオブジェクトを移動できない場合は、追加したパブリック メソッドにもタイプミスがあります。これは、作成したオブジェクトの属性にアクセスできるようにするためですClassMoveImages.prototype.m_move。ClassLoadImages.prototype.m_move

于 2013-04-09T08:56:01.730 に答える