Circles
One possibility to construct a circle is to give its center and a point defining its radius. For this we use the two points $A$ and $B$.
Watch the different ways to access the points $A$ and $B$. In the third example the fill color changes dynamically depending on the $x$-coordinate of $B$.
// Define the ids of your boards in BOARDID0, BOARDID1,...
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID0, {
boundingbox: [-5, 2, 5, -2]
});
var a = board.create('point', [0, 0], {
name: 'A',
size: 4
});
var b = board.create('point', [2, 0], {
name: 'B',
size: 4
});
var ci = board.create('circle', ["A", "B"], {
strokeColor: '#00ff00',
strokeWidth: 2
});
})();
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID1, {
boundingbox: [-5, 2, 5, -2]
});
var a = board.create('point', [0, 0], {
name: 'A',
size: 4
});
var b = board.create('point', [2, 0], {
name: 'B',
size: 4
});
var ci = board.create('circle', [a, b], {
strokeWidth: 3,
dash: 2,
fillColor: '#ffff00',
fillOpacity: 0.3
});
})();
(function() {
const board = JXG.JSXGraph.initBoard(BOARDID2, {
boundingbox: [-5, 2, 5, -2]
});
var a = board.create('point', [0, 0], {
name: 'A',
size: 4
});
var b = board.create('point', [2, 0], {
name: 'B',
size: 4
});
var ci = board.create('circle', [a, b], {
strokeWidth: 1,
fillColor: '#555500',
fillOpacity: function() {
return b.X() * 0.25;
}
});
})();
This example is licensed under a Creative Commons Attribution 4.0 International License.
Please note that you have to mention The Center of Mobile Learning with Digital Technology in the credits.