在父方法中使用子方法的类变量，以便可以动态更改变量（javascript）_Javascript_Html_Oop_Html5 Canvas

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

javascript html oop html5-canvas

在父方法中使用子方法的类变量，以便可以动态更改变量（javascript）,javascript,html,oop,html5-canvas,Javascript,Html,Oop,Html5 Canvas,我正在制作一个以鱼为背景的网页。我有一个名为Fish的父类和每种鱼的子类。Fish类有一个print方法，我想引用species类的每个实例常用的变量。我需要动态调整图像的大小，以便我只需修改物种的变量，并调整物种的每个对象。我的问题是：如何为父类方法中该类的每个实例可以使用的每个类创建单个变量这是我尝试过的一个简化版本。当然不行了。任何帮助都将不胜感激 <!DOCTYPE html> <html> <body> <can

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

这是我尝试过的一个简化版本。当然不行了。任何帮助都将不胜感激

<!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>


功能鱼（fi）{
this.myPic=fi；
}
Fish.prototype.print=函数（cnv，x，y）{
cnv.drawImage（这个.myPic，x，y）；
};
函数bufforf（）{Fish.call（this，bufforf.pic）；}
f.prototype=Object.create（Fish.prototype）；
小丑f.prototype.constructor=小丑f；
f.pic=新图像（）；
小丑f.pic.src=“小丑f.png”；
f.pic.onload=函数（）{
var c=document.getElementById（“myCanvas”）；
c、 宽度=500；
c、 高度=300；
var ctx=c.getContext（“2d”）；
var f=新的f（）；
f、 印刷品（ctx，10,10）；
var temp=document.createElement（'canvas'）；
温度宽度=f.pic.width/2；
温度高度=f.pic.height/2；
var tctx=temp.getContext（'2d'）；
tctx.drawImage（F.pic，0,0，温度宽度，温度高度）
f.pic=温度；
f、 打印（ctx，100100）；
}

试试这个：

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";

如果要创建更多的小丑F（如在onload方法期间），可以使用Object.create和小丑F作为原型（第一个参数）

编辑：

如果希望鱼的大小不同，可以在print（）中添加宽度和高度参数：

或者，您可以制作每条鱼的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
});

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

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

如果希望所有鱼同时更改，可以将其添加到鱼对象中

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

也许是这样的：谢谢你，CBroe，谢谢你的链接。实际上，我使用了同样的帖子来创建上面所示的程序。问题是，每一条鱼可能向前或向后移动，因此每个类别将有2张图像。每个单独的对象都需要一个变量来确定将哪个类图像用于其显示。我想我需要一个指针之类的东西。这样，每个对象都有一个指针，指向两个静态类范围变量中的一个，当这些静态变量更改时，所有对象都会相应更改。这个指针需要在通用的鱼印方法中使用。谢谢你的建议，bwroga。出于某种原因，我仍然有同样的问题。两条鱼看起来大小一样。在调用onload之前，我必须分配src，否则什么都不会出现。谢谢你，bwroga，谢谢你的帮助。我非常感激。

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