Circle: Difference between revisions
From JSXGraph Wiki
(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...) |
No edit summary |
||
| 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',[ | 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',[ | 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 | 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',[ | 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 15: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});
