# Difference between revisions of "Circle"

From JSXGraph Wiki

Jump to navigationJump to searchm |
A WASSERMANN (talk | contribs) |
||

Line 14: | Line 14: | ||

<html> | <html> | ||

<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /> | <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /> | ||

− | |||

<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script> | <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script> | ||

<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div> | <div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div> |

## Revision as of 17:24, 29 October 2009

## Circle through two points

One possibility to construct a circle is to give its center and a point defining its radius. Lets construct two points "A" and "B".

```
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p1 = b.createElement('point',[0,0], {name:'A',style:6});
var p2 = b.createElement('point',[2,-1], {name:'B',style:6});
```

Then we construct a circle through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.

```
var ci = b.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
```

Generally it is better to use JavaScript variables and not Geometry-Element names when constructing. Now, we do the same examples with JavaScript variables. To show other variations, we use a dashed stroke style and set a fill color.

```
var ci2 = b.createElement('circle',[p1,p2],
{strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
```

### Dynamic fill-opacity

We can make the fill-opacity dynamic and make it dependent on the position of "B", i.e. the JavaScript variable "p2".

```
var ci3 = b.createElement('circle',[p1,p2],
{strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });
```