首页 > > 网页制作 > Javascript >

js+画曲线和圆并限制圆的渲染范围

2018-06-24 01:04:30来源：未知阅读 ()

通过三个点的坐标可确定一条双曲线。

　　公式：

　　　　　　1）y=ax^2+bx+c;

　　　　　　2） y=a(x-k)+h;

　　　　　　通过已知三点可确定a,b,c,h,k

　　2.通过圆心坐标(a,b)和半径r可确定一个圆,和已知的x坐标：

　　公式：

　　　　　　1）r^2=（x-a）^2+（y-b）^2

　　3.圆是否相交，可通过求得圆心距G确定,圆心（x1,y1）和（x2,y2）：

　　　　　　1) G^2=(x1-x2)^2+(y1-y2)^2

　　4.确定圆上的点的x坐标是否在曲线内点（x,y）,1中求得的a,h,k;算出当前y值时的所在的曲线x值得范围：

　　　　　　1) x1 =Math.sqrt((y -h) / a) + k, x2 =k - Math.sqrt((y - h) / a);

　　以下为源码：

  1 <html>
  2 <head>
  3 
  4 </head>
  5 <body>
  6     <!--<div id="main">
  7 
  8     </div>-->
  9     <script>
 10         var mainDoc = document.getElementById("main");
 11         function _drawPoint(x, y) {
 12             var pe = document.createElement("div");
 13             pe.style.position = "absolute";
 14             pe.style.left = x;
 15             pe.style.top = y;
 16             pe.style.position
 17             pe.style.backgroundColor = "red";
 18             pe.style.width = 1;
 19             pe.style.height = 1;
 20             document.body.appendChild(pe);
 21         }
 22         var Circle = function (options) {
 23             this.center_x = options.center_x;
 24             this.center_y = options.center_y;
 25             this.radius = options.radius;
 26         }
 27         Circle.prototype = {
 28             draw: function () {
 29                 var sx = this.center_x - this.radius;
 30                 var ex = this.center_x + this.radius;
 31                 for (var i = sx; i <= ex; i += 0.1) {
 32                     var pos = this._pointCoordinate(i);
 33                     _drawPoint(pos[0].x, pos[0].y);
 34                     _drawPoint(pos[1].x, pos[1].y);
 35                 }
 36             },
 37             _pointCoordinate: function (x) {
 38                 var y = Math.sqrt(this.radius * this.radius - (x - this.center_x) * (x - this.center_x)) + this.center_y;
 39                 return [{ x: x, y: y }, {
 40                     x: x, y: this.center_y - (y - this.center_y)
 41                 }];
 42             }
 43         };
 44 
 45         var Hyperbola = function (options) {
 46             this.center_x = options.center_x;
 47             this.center_y = options.center_y;
 48             this.height = options.height;
 49             this.width = options.width;
 50             this.CircleList = [];
 51             this.k = 0;
 52             this.h = 0;
 53             this.a = 0;
 54             this._init();
 55         }
 56         Hyperbola.prototype = {
 57             draw: function () {
 58                 var sx = this.center_x - this.width / 2;
 59                 var ex = this.center_x + this.width / 2;
 60                 for (var i = sx; i <= this.center_x ; i += 0.1) {
 61                     var pos = this._pointCoordinate(i);
 62                     _drawPoint(pos[0].x, pos[0].y);
 63                     _drawPoint(pos[1].x, pos[1].y);
 64                 }
 65             },
 66             _init: function () {
 67                 var x1 = this.center_x - this.width / 2, y1 = this.center_y - this.height;
 68                 var x2 = this.center_x, y2 = this.center_y;
 69                 var x3 = this.center_x + this.width / 2, y3 = this.center_y - this.height;
 70                 var b = ((y1 - y2) * (x2 * x2 - x3 * x3) - (y2 - y3) * (x1 * x1 - x2 * x2)) / ((x1 - x2) * (x2 * x2 - x3 * x3) - (x2 - x3) * (x1 * x1 - x2 * x2));
 71                 var a = this.a = (y1 - y2 - b * x1 + b * x2) / (x1 * x1 - x2 * x2);
 72                 var c = y3 - a * x3 * x3 - b * x3;
 73                 var k = this.k = -b / (2 * a), h = this.h = (4 * a * c - b * b) / (4 * a);
 74             },
 75             _pointCoordinate: function (x) {
 76                 var y = this.a * (x - this.k) * (x - this.k) + this.h;
 77                 return [{ x: x, y: y }, {
 78                     x: this.center_x + Math.abs(this.center_x - x), y: y
 79                 }];
 80             },
 81             _randomCircle: function () {
 82                 var count = 1000;
 83                 while (count > 0) {
 84                     var x = this.center_x - this.width / 2 + Math.random() * this.width;
 85                     var y = this.center_y - Math.random() * this.height;
 86                     var radius = 3;
 87                     if (this.CheckTheBoundary(x - radius, y) && this.CheckTheBoundary(x + radius, y)
 88                         && this.CheckTheBoundary(x, y - radius) && this.CheckTheBoundary(x, y + radius)
 89                         && this.CheckTheCircle(x, y, radius)
 90                         ) {
 91                         var c = new Circle({ center_x: x, center_y: y, radius: radius });
 92                         c.draw();
 93                         this.CircleList.push(c);
 94                         count--;
 95                     }
 96                 }
 97             }
 98         ,
 99             move: function () {
100                 var speed = 5;
101                 for (var i = 0; i < this.CircleList.length; i++) {
102                     var c = this.CircleList[i];
103                     var x = this.center_x - this.width / 2 + Math.random() * this.width;
104                     var y = this.center_y - Math.random() * this.height;
105                     var radius = c.radius;
106                     if (this.CheckTheBoundary(x - radius, y) && this.CheckTheBoundary(x + radius, y)
107                           && this.CheckTheBoundary(x, y - radius) && this.CheckTheBoundary(x, y + radius)
108                           && this.CheckTheCircle(x, y, radius)
109                           ) {
110                         c.center_y = y;
111                         c.center_x = x;
112                         console.log(c.center_y);
113                         c.draw();
114                     }
115                 }
116             },
117             CheckTheBoundary: function (x, y) {
118                 if (y < (this.center_y - this.height)) return false;
119                 if (x < 0 || y < 0) return false;
120                 if (y > this.center_y) return false;
121                 var x1 = Math.sqrt((y - this.h) / this.a) + this.k, x2 = this.k - Math.sqrt((y - this.h) / this.a);
122                 var maxx = Math.max(x1, x2);
123                 var minx = Math.min(x1, x2);
124                 //if (isNaN(maxx) || isNaN(minx)) return false;
125                 if (x < minx || x > maxx) {
126                     return false;
127                 }
128                 return true;
129             },
130             CheckTheCircle: function (x, y, r) {
131                 for (var i = 0; i < this.CircleList.length; i++) {
132                     var g = Math.sqrt((x - this.CircleList[i].center_x) * (x - this.CircleList[i].center_x)
133                         + (y - this.CircleList[i].center_y) * (y - this.CircleList[i].center_y))
134                     if (g < (r + this.CircleList[i].radius))
135                         return false;
136                 }
137                 return true;
138             }
139         };
140         var h = new Hyperbola({ center_x: 700, center_y: 600, width: 800, height: 400 });
141         h.draw();
142         h._randomCircle();
143         //setInterval(function () {
144         //    h.move();
145         //}, 1000);
146     </script>
147 </body>
148 </html>