Difference between revisions of "Circle"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
|||
(5 intermediate revisions by 3 users not shown) | |||
Line 3: | Line 3: | ||
Lets construct two points "A" and "B". | Lets construct two points "A" and "B". | ||
<source lang="javascript"> | <source lang="javascript"> | ||
− | var b = JXG.JSXGraph.initBoard('jxgbox', { | + | var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]}); |
− | var p1 = | + | var p1 = b.create('point',[0,0], {name:'A',size: 4, face: 'o'}); |
− | var p2 = | + | var p2 = b.create('point',[2,-1], {name:'B',size: 4, face: 'o'}); |
</source> | </source> | ||
Then we construct a circle through "A" and "B". The setting of a new color and changing the stroke-width is not necessary. | Then we construct a circle through "A" and "B". The setting of a new color and changing the stroke-width is not necessary. | ||
<source lang="javascript"> | <source lang="javascript"> | ||
− | var ci = | + | var ci = b.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2}); |
</source> | </source> | ||
− | < | + | <jsxgraph box="jxgbox" width="500" height="200"> |
− | + | var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]}); | |
− | + | var p1 = brd.create('point',[0,0], {name:'A',size: 4, face: 'o'}); | |
− | + | var p2 = brd.create('point',[2,-1], {name:'B',size: 4, face: 'o'}); | |
− | + | var ci = brd.create('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2}); | |
− | + | </jsxgraph> | |
− | var brd = JXG.JSXGraph.initBoard('jxgbox', { | ||
− | var p1 = brd. | ||
− | var p2 = brd. | ||
− | var ci = brd. | ||
− | </ | ||
− | |||
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. | ||
Line 29: | Line 23: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
− | var ci2 = | + | var ci2 = b.create('circle',[p1,p2], |
{strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3}); | {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3}); | ||
</source> | </source> | ||
− | < | + | <jsxgraph box="jxgbox2" width="500" height="200"> |
− | + | var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]}); | |
− | + | var p1 = brd2.create('point',[0,0], {name:'A',size: 4, face: 'o'}); | |
− | var brd2 = JXG.JSXGraph.initBoard('jxgbox2', { | + | var p2 = brd2.create('point',[2,-1], {name:'B',size: 4, face: 'o'}); |
− | var p1 = brd2. | + | var ci2 = brd2.create('circle',[p1,p2], |
− | var p2 = brd2. | ||
− | var ci2 = brd2. | ||
{strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3}); | {strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3}); | ||
− | </ | + | </jsxgraph> |
− | |||
=== Dynamic fill-opacity === | === Dynamic fill-opacity === | ||
− | We can make the fill-opacity dynamic and make it | + | We can make the fill-opacity dynamic and make it dependent on the position of "B", i.e. the JavaScript variable "p2". |
<source lang="javascript"> | <source lang="javascript"> | ||
− | var ci3 = | + | var ci3 = b.create('circle',[p1,p2], |
{strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} }); | {strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} }); | ||
</source> | </source> | ||
− | < | + | <jsxgraph box="jxgbox3" width="500" height="200"> |
− | + | var brd3 = JXG.JSXGraph.initBoard('jxgbox3', {boundingbox: [-5, 2, 5, -2]}); | |
− | + | var p1 = brd3.create('point',[0,0], {name:'A',size: 4, face: 'o'}); | |
− | var brd3 = JXG.JSXGraph.initBoard('jxgbox3', { | + | var p2 = brd3.create('point',[2,0], {name:'B',size: 4, face: 'o'}); |
− | var p1 = brd3. | + | var ci3 = brd3.create('circle',[p1,p2], |
− | var p2 = brd3. | ||
− | var ci3 = brd3. | ||
{strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} }); | {strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} }); | ||
− | </ | + | </jsxgraph> |
− | |||
[[Category:Examples]] | [[Category:Examples]] |
Latest revision as of 10:21, 3 March 2021
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', {boundingbox: [-5, 2, 5, -2]});
var p1 = b.create('point',[0,0], {name:'A',size: 4, face: 'o'});
var p2 = b.create('point',[2,-1], {name:'B',size: 4, face: 'o'});
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.create('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.create('circle',[p1,p2],
{strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });