0

我正在制作一个网页，鱼在后台移动。我有一个名为 Fish 的父类和每种鱼的子类。Fish 类有一个 print 方法，我想引用该类的每个实例常用的变量。我需要动态调整图像的大小，所以我想简单地修改物种的变量并调整物种的每个对象。我的问题是：如何为每个类创建一个变量，该变量可以由该类的每个实例在父类方法中使用？

这是我尝试过的简化版本。当然是行不通的。任何帮助将非常感激。

<!DOCTYPE html>
<html>
     <body>
          <canvas id="myCanvas"></canvas>
     </body>
     <script>

          function Fish(fi){
               this.myPic = fi;
          }
          Fish.prototype.print = function(cnv, x, y){
               cnv.drawImage(this.myPic,x,y);
          };

          function clownF(){Fish.call(this, clownF.pic);}
          clownF.prototype = Object.create(Fish.prototype);
          clownF.prototype.constructor = clownF;
          clownF.pic = new Image();
          clownF.pic.src = "clownF.png";

          clownF.pic.onload = function(){
               var c=document.getElementById("myCanvas");
               c.width = 500;
               c.height = 300;
               var ctx=c.getContext("2d");

               var f = new clownF();
               f.print(ctx,10,10);

               var temp = document.createElement('canvas');
               temp.width = clownF.pic.width / 2;
               temp.height = clownF.pic.height / 2;
               var tctx = temp.getContext('2d');
               tctx.drawImage(clownF.pic,0,0,temp.width,temp.height)
               clownF.pic = temp;

               f.print(ctx,100,100);
          }
     </script>
</html>
4

1 回答 1

0

尝试这个：

var fish = {
    print: function (cnv, x, y) {
        cnv.drawImage(this.pic, x, y);
    }
}

var clownF = Object.create(fish, {
    pic: { value: new Image() }
});

// define onload here before you set src.

clownF.pic.src = "clownF.png";

如果你想创建更多的 clownFs（比如在 onload 方法期间），你可以使用 Object.create 和 clownF 作为原型（第一个参数）。

编辑：

如果你想让鱼有不同的大小，你可以在 print() 中添加一个宽度和高度参数：

var fish = {
    print: function (cnv, x, y, width, height) {
        cnv.drawImage(this.pic, x, y, width, height);
    }
};

或者，您可以制作每条鱼的 x、y、宽度和高度属性，并以此引用它们。：

var fish = {
    print: function (cnv) {
        cnv.drawImage(this.pic, this.x, this.y, this.width, this.height);
    }
};

var fish1 = Object.create(clownF, {
    pic: new Image(),
    x: 0,
    y: 0,
    width: 100,
    height: 50
});

关于您的上述评论，如果您希望能够为每条鱼使用两个图像并使其可配置，您可以这样做：

var fish = {
    print: function (cnv, x, y) {
        if(this.forward) {
            cnv.drawImage(this.forwardPic, x, y);
        } else {
            cnv.drawImage(this.backwardPic, x, y);
        }
    }
}

var clownF = Object.create(fish, {
    forwardPic: { value: new Image() },
    backwardPic: { value: new Image() }
});

clownF.forwardPic.src = "forwardClownF.png";
clownF.backwardPic.src = "backwardClownF.png";

var fish1 = Object.create(clownF, {
    forward: true
});
var fish2 = Object.create(clownF, {
    forward: false
});

如果您希望所有小丑鱼一次改变方向，您可以将“前进”变量移动到 clownF 对象中：

var clownF = Object.create(fish, {
    forwardPic: { value: new Image() },
    backwardPic: { value: new Image() },
    forward: true
});

如果你想让所有的鱼同时改变，你可以将它添加到 Fish 对象中。

var fish = {
    print: function (cnv, x, y) {
        if(this.forward) {
            cnv.drawImage(this.forwardPic, x, y);
        } else {
            cnv.drawImage(this.backwardPic, x, y);
        }
    },
    forward: true
}

如果前后图像相同，您可以只使用一张图像并将其翻转：

var fish = {
    print: function (cnv, x, y) {
        if(this.forward) {
            cnv.drawImage(this.pic, x, y);
        } else {
            cnv.save();
            cnv.scale(-1, 1);
            cnv.drawImage(this.pic, x, y);
            cnv.restore();
        }
    }
}
于 2013-04-27T02:03:40.367 回答