Question

如何从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>

Answer 1

如果您指的是在构造函数中创建的图像元素，则只需将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以便访问该属性你创建的对象。

从班级移动图像

1 个答案: