En el ejemplo anterior definimos de una manera muy basica varios poligonos, bueno decidi buscar la manera de pintarlos en un lienzo (canvas) y aqui el resultado (ojo necesitas un browser que soporte HTML 5)
Lo primero el HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Figure Example</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border: solid 1px black"></canvas>
<script type="text/javascript" src="figure.js"></script>
</body>
</html>
Note q al javascript le hemos dado el nombre de figure.js
Seguidamente el codigo con el canvas, es bastante sencillo para mas detalles busque la documentacion de cada metodo.
Lo primero el HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Figure Example</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border: solid 1px black"></canvas>
<script type="text/javascript" src="figure.js"></script>
</body>
</html>
Note q al javascript le hemos dado el nombre de figure.js
Seguidamente el codigo con el canvas, es bastante sencillo para mas detalles busque la documentacion de cada metodo.
/**
* User: jsanca
* Date: 6/12/13
* Time: 11:10 PM
*/
// Defines a point
function Point (x, y) {
this.x = x;
this.y = y;
} // Point
// Basic definition of a Figure, just a point in nowhere.
function Figure (point, name) {
this.point = point;
this.name = name;
this.render = function (context) {
console.log("figure: " + this.name + " " +this.point);
}
} // Figure.
// the points defines some of the sides
function Square (point1, point2, name) {
Figure.call(this, point1, name);
this.point2 = point2;
this.side = function () {
var side =
(this.point2.x == this.point.x)?
this.point2.y - this.point.y:
this.point2.x - this.point.x;
return Math.abs(side);
}
this.area = function () {
var side = this.side();
return Math.pow(side, 2);
}
this.render = function (context) {
// render out the square.
var side = this.side();
context.fillStyle = "rgb(0,0,255)";
context.fillRect (this.point.x, this.point.y, side, side);
console.log("square: " + this.name + ", area = " + this.area());
}
} // Square.
Square.prototype.parent = Figure.prototype;
Square.prototype.constructor = Square;
// the points defines the point angles
function Triangle (point1, point2, point3, name) {
Figure.call(this, point1, name);
this.point2 = point2;
this.point3 = point3;
this.area = function () {
var base = 0;
var verticalHeight = 0;
if (this.point2.x == this.point.x) {
base = this.point2.y - this.point.y;
verticalHeight = this.point.x - this.point3.x;
} else {
base = this.point2.x - this.point.x;
verticalHeight = this.point.y - this.point3.y;
}
return 0.5 * Math.abs(base) * Math.abs(verticalHeight);
}
this.render = function (context) {
console.log("triangle: " + this.name + ", area = " + this.area());
// the triangle tooks a base point and them move to the rest of the angle point
context.fillStyle = "rgb(255,0,0)";
context.beginPath();
context.moveTo(this.point.x,this.point.y);
context.lineTo(this.point2.x,this.point2.y);
context.lineTo(this.point3.x,this.point3.y);
context.fill();
}
} // Triangle.
Triangle.prototype.parent = Figure.prototype;
Triangle.prototype.constructor = Triangle;
// the points you pass are the diagonal of the rectangle.
function Rectangle (point1, point2, name) {
Figure.call(this, point1, name);
this.point2 = point2;
this.width = function () {
return Math.abs(this.point2.x - this.point.x);
}
this.height = function () {
return Math.abs(this.point2.y - this.point.y);
}
this.area = function () {
return this.width() * this.height();
}
this.render = function (context) {
console.log("rectangle: " + this.name + ", area = " + this.area());
context.fillStyle = "rgb(0,255, 0)";
context.fillRect (this.point.x, this.point.y, this.width(), this.height());
}
} // Rectangle.
Rectangle.prototype.parent = Figure.prototype;
Rectangle.prototype.constructor = Rectangle;
// the points defines the radius
function Circle (point1, point2, name) {
Figure.call(this, point1, name);
this.point2 = point2;
this.radius = function () {
var radius =
(this.point2.x == this.point.x)?
this.point2.y - this.point.y:
this.point2.x - this.point.x;
return Math.abs(radius);
}
this.circumference = function () {
var radius = this.radius();
return 2 * Math.PI * radius;
}
this.area = function () {
var radius = this.radius();
return Math.PI * Math.pow(radius, 2);
}
this.render = function (context) {
var radius = this.radius();
console.log("circle: " + this.name + ", area = " + this.area() + ", circumference = " + this.circumference() + ", radius = " + radius);
context.fillStyle = "rgb(255,255, 0)";
context.beginPath();
context.arc(this.point.x, this.point.y, radius , 0,2 * Math.PI);
context.stroke();
}
} // Circle.
Circle.prototype.parent = Figure.prototype;
Circle.prototype.constructor = Circle;
console.log("Running");
var figuresArray = new Array(
new Square (new Point(10,10), new Point(10,30), "Cuadrado 1"),
new Square (new Point(10,50), new Point(20,50), "Cuadrado 2"),
new Triangle(new Point(10,10), new Point(10,20), new Point(0,15), "Mi Triangulito"),
new Triangle(new Point(100,100), new Point(60,160), new Point(160,160), "Triangulo grande"),
new Rectangle(new Point(80,50), new Point(90,80), "Mi Rectangulo"),
new Circle(new Point(200,200), new Point(200,225), "Mi Circulo")
);
var canvas = document.getElementById('myCanvas');
var context = (canvas.getContext)?
canvas.getContext('2d'):null;
figuresArray.forEach(
function(entry) {
console.log(entry);
entry.render(context);
}
);
Ejecutalo para ver el resultado :) cada figura tiene un color diferente
Comentarios