[JavaScript知识库]用JavaScript实现一个小图形

1.分析

首先，我们要将所有对象的公共部分定义成一个构造器，即Shape。然后基于这个构造器分别构建Triangle、Rectangle和Square构造器，它们将全部继承于Shape。其中，，Square实际上可以当做一个长宽度相等的Rectangle。因此构建Square时可以直接重用Rectangle。
下面，我们来定义Shape对象，首先先定义一个带坐标的point对象和其长宽度。图像的周长一般是其各边长度的综合，而计算一个图形的面积的公式则随图形不同有较大差异，应该由这些图形自己来实现。
SHape体系中的共有属性主要包括：

• 一个能根据给定的point绘制出图形的draw方法。
• 一个getParameter的方法
• 一个用于存储point对象的数组属性
• 其他必须的属性与方法

2、实现

首先，在空白的HTML页面中添加一个canvas标签，这是用于绘制的。

<canvas HEIGHT="600", WIDTH="800" ID="canvas" />

然后再插入

<script src="2.js">

</script>

下面来实现js部分的工作。首先是定义辅助构造器point，最简单的实现方法如下：

function Point(x, y) {
    this.x= x;
    this.y = y;
}

接下来，Line会根据勾股定理计算出给定两点之间的直线距离

function Line(p1, p2) {
    this.p1 = p1;
    this.p2 = p2;
    this.length = Math.sqrt(
        Math.pow(p1.x - p2.x, 2) +
        Math.pow(p1.y - p2.y, 2)
    );
}

下一步，就进入Shape构造器的定义了。该构造器需要有一个自己的points属性。另外还需要一个初始化方法init()，用于定义其原型。

function Shape(){
    this.points = [];
    this.lines = [];
    this.init();
}

Shape.prototype = {
    constructor: Shape,
    init: function () {
        if (this.context === undefined) {
            var canvas = document.getElementById('canvas');
            Shape.prototype.context = canvas.getContext('2d');


        }
    },
    draw: function () {
        var i, ctx = this.context;
        ctx.strokeStyle = this.getColor();
        ctx.beginPath();
        ctx.moveTo(this.points[0].x, this.points[0].y);
        for (i = 1; i < this.points.length; i++) {
            ctx.lineTo(this.points[i].X, this[i].y);
        }
        ctx.closePath();
        ctx.stroke();
    },
    getColor: function () {
        var i, rgb = [];
        for (i = 0; i < 3; i++) {
            rgd[i] = Math.round(255 * Math.random());
        }
        return 'rgb(' + rgb.join(',') + ')';
    },
    getLines: function () {
        if (this.lines.length > 0) {
            return this.lines;
        }
        var i, lines = [];
        for (i = 0; i < this.points.length; i++) {
            lines[i] = new Line(this.points[i]);
            this.points[i + 1] || this.points[0];
        }
        this.lines = lines;
        return lines;
    },

    getArea: function () {
    },

    getPerimeter: function () {
        var i, perim = 0, line = this.getLines();
        for (i = 0; i < line.length; i++) {
            perim += lines[i].length;
        }
        return perim;

    }
};

接着是子对象构造器，先从Triangle开始：

function Triangle(a, b, c){
    this.points= [a, b, c];
    this.getArea = function(){
        var p = this.getPerimeter();
        s = p / 2;
        return Math.sqrt(
            s
            * (s - this.lines[0].length)
            * (s - this.lines[1].length)
            * (s - this.lines[2].length)
        );
    }
}

在Triangle构造器中，我们会将其接收到的三个point对象赋值给this.points。然后再利用海伦公式实现其getArea()方法。
接下来实现rectangle构造器，该对象接收的参数是一个point对象行业两边的长度。然后再以该point起点，自行填充points数组。

function Rectangle(p, side_a, side_b) {
    this.points = [
        p, 
        new Point(p.x + side_a, p.y),
        new Point(p.x, side_a, p.y + side_b),
        new Point(p.x, p.y + side_b)
    ];
    this.getArea = function(){
        return side_a * side_b;
    };

}

最后一个子对象构造器是Square。由于Square是Rectangle的一种特例，所以对它的实现，我们可以重用Rectangle，而其中最简单的莫过于构造器借用了。

function Square(p, slider) {
    Rectangle.call(this, p, side, side);

}

到目前为止，所有的构造器已经实现。开始处理他们之间的继承关系，几乎所有的仿传统模式（即工作方式是基于构造器而非对象的模式）都符合需求。
下面，修改为原型链模式，并提供一个简化版本。在原型链模式中，需要新建一个父对象实体，然后之间将其设置为子对象的原型。这样，就没有必要为每个对象的原型创建新的实体。

(function() {
    var s = new Shape();
    Triangle.prototype = s;
    Rectangle.prototype = s;
    Square.prototype = s;
})();