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

来源：互联网发布：霍启山评价郭晶晶知乎编辑：程序博客网时间：2024/05/16 10:45

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

阅读全文

0 0