如何使用原型模式制作html5矩形以供重用

Question

我试图通过创建一个矩形对象和一个矩形实例来使用原型模式来理解原型继承。看起来很简单，但我不明白。RectanglePrototype的方法不是将矩形绘制到画布上。如果我使用与方法相同的函数，它就能工作。我哪里出问题了？另外，我知道我需要做一个初始化函数，但是我想在我完成第一个基本步骤之后，我可以这样做。

javascript:

    window.onload = function () {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var RectanglePrototype = {
        // Properties
        x: 0,
        y: 0,
        width: 100,
        height: 100,
        color: "white",

        // Method
        get:function (x, y, width, height, color) {
            context.translate(0 , 0);
            context.beginPath();
            context.rect(x, y, width, height);
            context.fillStyle = color;
            context.fill();
            return this.x, this.y, this.width, this.height, this.color;
        }
    };

    console.log(RectanglePrototype.get);

    // Instance of RectanglePrototype
    var rectangle1 = Object.create(RectanglePrototype);
        rectangle1.x = 200;
        rectangle1.y = 100;
        rectangle1.width = 300;
        rectangle1.height = 150; 
        rectangle1.color = '#DBE89B';

    // Draw Rectangle Function
    function rect(x, y, width, height, color) {
        context.translate(0 , 0);
        context.beginPath();
        context.rect(x, y, width, height); // yLoc-canvas.height = -300
        context.fillStyle = color;
        context.fill();
    };

    rect(0, 450, 50, 50, '#F7F694');    

}
</script>

Answer 1

原型是由构造函数产生的对象的扩展。方法查找在查看prototype之前先检查对象属性。

我正确地设计了JS，您只会在构造函数中添加非函数属性。

//Your constructor
function Rectangle(){
    // Properties
    this.x = 0;
    this.y = 0;
    this.width = 100;
    this.height = 100;
    this.color = 'red';
}

然后将这些方法放在原型中：

//I prefer the term 'draw'
Rectangle.prototype.draw = function(ctx){
    ctx.save();
    ctx.beginPath();
    ctx.rect(this.x, this.y, this.width, this.height);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.restore();
};

然后，在您的项目中使用：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

//List of your shapes to draw on the canvas
var shapes = [];

//Instance of Rectangle
var rectangle1 = new Rectangle();
    rectangle1.x = 200;
    rectangle1.y = 100;
    rectangle1.width = 300;
    rectangle1.height = 150; 
    rectangle1.color = '#DBE89B';
    shapes.push(rectangle1);

//Draw your shapes
function draw(){
    window.requestAnimationFrame(draw);    //See MDN for proper usage, but always request next fram at the start of your draw loop!

    for(var i = 0; i<shapes.length; i++){
        shapes[i].draw(context);
    }
}

这是画到画布上的‘适当’方式。对于任何更大的规模，请看看现有的引擎，为你做了一个努力工作，并考虑了一切，所以你不必这样做。我曾研究过这样的发动机。