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

如果您的意思是在构造函数中创建的图像元素，那么您只需添加new Imageto 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 回答