Include JSXGraph: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) m (A WASSERMANN moved page Include JSXGraph together with jQuery to Include JSXGraph) |
A WASSERMANN (talk | contribs) No edit summary |
||
| Line 40: | Line 40: | ||
<jsxgraph width="500" height="500" id="jxgbox"> | <jsxgraph width="500" height="500" id="jxgbox"> | ||
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]}); | board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]}); | ||
g1 = board. | g1 = board.create('point', [1, -1], {style:6}); | ||
g2 = board. | g2 = board.create('point', [2.5, -2], {style:6}); | ||
g3 = board. | g3 = board.create('point', [1, -3], {style:5}); | ||
g4 = board. | g4 = board.create('point', [2.5, -4], {style:5}); | ||
g5 = board. | g5 = board.create('point', [-4, 1], {style:5,name:''}); | ||
c1 = board. | c1 = board.create('curve', [ | ||
function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); }, | function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); }, | ||
function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); }, | function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); }, | ||
| Line 61: | Line 61: | ||
<script language="JavaScript"> | <script language="JavaScript"> | ||
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]}); | board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]}); | ||
g1 = board. | g1 = board.create('point', [1, -1], {style:6}); | ||
g2 = board. | g2 = board.create('point', [2.5, -2], {style:6}); | ||
g3 = board. | g3 = board.create('point', [1, -3], {style:5}); | ||
g4 = board. | g4 = board.create('point', [2.5, -4], {style:5}); | ||
g5 = board. | g5 = board.create('point', [-4, 1], {style:5, name:''}); | ||
c1 = board. | c1 = board.create('curve', [ | ||
function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); }, | function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); }, | ||
function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); }, | function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); }, | ||
Latest revision as of 13:03, 3 March 2021
Including JSXGraph into HTML
For including JSXGraph into HTML, two files are necessary:
- jsxgraphcore.js from https://jsxgraph.org/distrib/jsxgraphcore.js
- jsxgraph.css from https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css
You can either download these three files and use the local copy or you can use the online version.
Usage of a local copy
If you want to include a local copy of JSXGraph in your HTML file then you have to write the following lines into the document head:
<head>
<link rel="stylesheet" type="text/css" href="jsxgraph.css" />
<script type="text/javascript" src="jsxgraphcore.js"></script>
</head>
Usage of the online copy
If you want to include the online of JSXGraph in your HTML file then you have to write the following lines into the document head:
<head>
<link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" />
<script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
</head>
Include a drawing panel into the HTML
The geometric construction which is displayed by JSXGraph resides in an HTML element. Usually, a div-element is taken. This division needs an ID. Using this ID, we declare this element to be a drawing panel of JSXGraph.
The following code has to be placed into the body part of an HTML file:
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 5, 5, -5]});
</script>
We can use as many different drawing panels as we like in one HTML file.
Example
<link rel="stylesheet" type="text/css" href="https://jsxgraph.org/distrib/jsxgraph.css" />
<script type="text/javascript" src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px;"></div>
<script language="JavaScript">
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5]});
g1 = board.create('point', [1, -1], {style:6});
g2 = board.create('point', [2.5, -2], {style:6});
g3 = board.create('point', [1, -3], {style:5});
g4 = board.create('point', [2.5, -4], {style:5});
g5 = board.create('point', [-4, 1], {style:5, name:''});
c1 = board.create('curve', [
function(t){ return (g1.X()-g2.X())*Math.cos(t)+g3.X()*Math.cos(t*(g1.X()-g2.X())/g2.X()); },
function(t){ return (g1.X()-g2.X())*Math.sin(t)+g3.X()*Math.sin(t*(g1.X()-g2.X())/g2.X()); },
0,function(){ return Math.PI*7*Math.abs(g4.X());}],{
strokeWidth: function() { return g5.Y()*3; },
strokeOpacity: function() { return g5.Y()*0.6; }
});
</script>
Further examples
Circles on circles contains an advanced example.
