Difference between revisions of "Circle"

From JSXGraph Wiki
Jump to: navigation, search
(New page: == 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". <source lang="javascript"> var b...)
 
Line 4: Line 4:
 
<source lang="javascript">
 
<source lang="javascript">
 
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
 
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p1 = board.createElement('point',[-1,1], {name:'A',style:6});
+
var p1 = board.createElement('point',[0,0], {name:'A',style:6});
 
var p2 = board.createElement('point',[2,-1], {name:'B',style:6});
 
var p2 = board.createElement('point',[2,-1], {name:'B',style:6});
 
</source>
 
</source>
Line 19: Line 19:
 
<script type="text/javascript">
 
<script type="text/javascript">
 
  var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
 
  var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
  var p1 = brd.createElement('point',[-1,1], {name:'A',style:6});
+
  var p1 = brd.createElement('point',[0,0], {name:'A',style:6});
 
  var p2 = brd.createElement('point',[2,-1], {name:'B',style:6});
 
  var p2 = brd.createElement('point',[2,-1], {name:'B',style:6});
 
  var ci = brd.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
 
  var ci = brd.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
Line 26: Line 26:
  
 
Generally it is better to use JavaScript variables and not Geometry-Element names when constructing.
 
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 another variation, we use a dashed stroke style.
+
Now, we do the same examples with JavaScript variables. To show other variations, we use a dashed stroke style and set a fill color.
  
 
<source lang="javascript">
 
<source lang="javascript">
var ci2 = brd2.createElement('circle',[p1,p2], {strokeWidth:3, dash:2});
+
var ci2 = brd2.createElement('circle',[p1,p2],  
 +
    {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
 
</source>
 
</source>
  
Line 36: Line 37:
 
<script type="text/javascript">
 
<script type="text/javascript">
 
  var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
 
  var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
  var p1 = brd2.createElement('point',[-1,1], {name:'A',style:6});
+
  var p1 = brd2.createElement('point',[0,0], {name:'A',style:6});
 
  var p2 = brd2.createElement('point',[2,-1], {name:'B',style:6});
 
  var p2 = brd2.createElement('point',[2,-1], {name:'B',style:6});
  var ci2 = brd2.createElement('circle',[p1,p2], {strokeWidth:3, dash:2});
+
  var ci2 = brd2.createElement('circle',[p1,p2],  
 +
  {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
 
</script>
 
</script>
 
</html>
 
</html>

Revision as of 16:55, 17 September 2008

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 = board.createElement('point',[0,0], {name:'A',style:6});
var p2 = board.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 li = brd.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 = brd2.createElement('circle',[p1,p2], 
    {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});