|
|
@@ -0,0 +1,74 @@
|
|
|
+ function Figure(x,y,color) {
|
|
|
+ this.x = x;
|
|
|
+ this.y = y;
|
|
|
+ this.color = color;
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ function Circle(x,y,r,color) {
|
|
|
+ Figure.call(this,x,y,color);
|
|
|
+ this.r = r;
|
|
|
+ };
|
|
|
+
|
|
|
+ Circle.prototype.draw = function(par) {
|
|
|
+ par.fillStyle = this.color;
|
|
|
+ par.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
|
|
|
+ par.fill();
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ function Rect(x,y,w,h,color) {
|
|
|
+ Figure.call(this,x,y,color);
|
|
|
+ this.w = w;
|
|
|
+ this.h = h;
|
|
|
+ };
|
|
|
+
|
|
|
+ Rect.prototype.draw = function(par) {
|
|
|
+ par.fillStyle = this.color;
|
|
|
+ par.fillRect(this.x, this.y, this.x+this.w, this.y+this.h);
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ function Line(x1,y1,x2,y2,color) {
|
|
|
+ Figure.call(this,x1,y1,color);
|
|
|
+ this.x2 = x2;
|
|
|
+ this.y2 = y2;
|
|
|
+ };
|
|
|
+
|
|
|
+ Line.prototype.draw = function(par) {
|
|
|
+ par.strokeStyle = this.color;
|
|
|
+ par.moveTo(this.x,this.y);
|
|
|
+ par.lineTo(this.x2,this.y2);
|
|
|
+ par.stroke();
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ function Canvas(id) {
|
|
|
+
|
|
|
+ this.add = function(figure) {
|
|
|
+
|
|
|
+ var canvas = document.getElementById(id),
|
|
|
+ ctx = canvas.getContext("2d");
|
|
|
+
|
|
|
+ figure.draw(ctx);
|
|
|
+ };
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //------------------//
|
|
|
+
|
|
|
+ var line = new Line(25, 75, 275, 75, 'red'); // x1, y1, x2, y2, color
|
|
|
+ var circle = new Circle(120, 100, 50, 'green'); // x, y, r, color
|
|
|
+ var rect = new Rect(100, 30, 50, 100, 'blue'); // x, y, w, h, color
|
|
|
+
|
|
|
+ var drawArea = new Canvas('canvasLine');
|
|
|
+ drawArea.add(line);
|
|
|
+
|
|
|
+ var drawArea = new Canvas('canvasCircle');
|
|
|
+ drawArea.add(circle);
|
|
|
+
|
|
|
+ var drawArea = new Canvas('canvasRect');
|
|
|
+ drawArea.add(rect);
|
|
|
+
|
|
|
+
|
