Question

我正在制作一个在后台移动鱼的网页。我有一个名为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>

Answer 1

试试这个：

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作为原型（第一个参数）。

修改

如果你想让鱼的大小不同，你可以添加一个宽度和高度参数来打印（）：

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 });

如果你想让所有的小丑鱼一下子改变方向，你就可以向前移动＆＃34;前进＆＃34;变量进入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(); } } }

在父方法中使用子类变量，这样变量可以动态改变（javascript）

1 个答案: