用JavaScript面向对象画一个三角形

html

<html>
<body>

<div>
    <canvas height="600" width="800" id="canvas">   
    </canvas>
</div>
<script type="text/javascript" src="test.js"></script>
</body>
</html>

js

function Point(x,y){
    this.x = x;
    this.y = y;
};
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))
};
function Shape(){
    this.points=[];
    this.lines=[];
    this.init();
};
Shape.prototype={
    constructor:Shape,
    init:function(){
        if (typeof this.context === "undefined") {
            var canvas = document.getElementById('canvas');
            Shape.prototype.context = canvas.getContext('2d')
        }
    },
    draw:function(){
        var ctx = this.context;
        ctx.strokeStyle= this.getColor();
        ctx.beginPath();
        ctx.moveTo(this.points[0].x,this.points[0].y);
        for(var i = 1;i < this.points.length;i++){
            ctx.lineTo(this.points[i].x,this.points[i].y)
        }
        ctx.closePath();
        ctx.stroke();
    },
    getColor:function(){
        var rgb = [];
        for(var i = 0; i < 3; i++){
            rgb[i] = Math.round(255 * Math.random())
        }
        return 'rgb('+rgb.join(',')+')';
    },
    getLines:function(){
        if(this.lines.length > 0){
            return this.lines;
        }
        var lines = [];
        for(var i = 0;i<this.points.length;i++){
            lines[i] = new Line(this.points[i],(this.points[i+1]?this.points[i+1]:this.points[0]));
        }
        this.lines = lines;
        return lines;
    },
    getArea:function(){},
    getPerimeter:function(){
        var lines = this.getLines();
        var perim = 0;
        for(var i = 0;i<lines.length;i++){
            perim += lines[i].length;
        }
        return perim;
    }
};

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

function Rect(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}
};

function Square(p,side){
    Rect.call(this,p,side,side);
};

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


var p1 = new Point(100,100);
var p2 = new Point(300,100);
var p3 = new Point(200,0);

var t = new Triangle(p1,p2,p3);

t.draw();
// console.log(t.getPerimeter())
// console.log(t.getArea())

用JavaScript面向对象画一个三角形

html

js

猜你喜欢