<html> <head> <title>Euler line with JSXGraph</title> <link rel="stylesheet" type="text/css" href="jsxgraph.css"/> <script type="text/javascript" src="jsxgraphcore.js"></script> </head> <body> <div id="box-euler-line" class='jxgbox' style='width:400px; height:400px;'></div> <script type='text/javascript'> // The following code is a very slightly modified copy of: http://jsxgraph.uni-bayreuth.de/wiki/index.php/Euler_line // ie 'showNavigation:false' was added to the initialization attributes to hide the zoom toolbar. (function () { var board = JXG.JSXGraph.initBoard('box-euler-line', {showNavigation:false, boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true}); var cerise = { strokeColor: '#901B77', fillColor: '#CA147A' }, grass = { strokeColor: '#009256', fillColor: '#65B72E', visible: true, withLabel: true }, perpendicular = { strokeColor: 'black', dash: 1, strokeWidth: 1, point: JXG.deepCopy(cerise, { visible: true, withLabel: true }) }, median = { strokeWidth: 1, strokeColor: '#333333', dash:2 }, A = board.create('point', [1, 0], cerise), B = board.create('point', [-1, 0], cerise), C = board.create('point', [0.2, 1.5], cerise), pol = board.create('polygon',[A,B,C], { fillColor: '#FFFF00', lines: { strokeWidth: 2, strokeColor: '#009256' } }); var pABC, pBCA, pCAB, i1; perpendicular.point.name = 'H_c'; pABC = board.create('perpendicular', [pol.borders[0], C], perpendicular); perpendicular.point.name = 'H_a'; pBCA = board.create('perpendicular', [pol.borders[1], A], perpendicular); perpendicular.point.name = 'H_b'; pCAB = board.create('perpendicular', [pol.borders[2], B], perpendicular); grass.name = 'H'; i1 = board.create('intersection', [pABC, pCAB, 0], grass); var mAB, mBC, mCA; cerise.name = 'M_c'; mAB = board.create('midpoint', [A, B], cerise); cerise.name = 'M_a'; mBC = board.create('midpoint', [B, C], cerise); cerise.name = 'M_b'; mCA = board.create('midpoint', [C, A], cerise); var ma, mb, mc, i2; ma = board.create('segment', [mBC, A], median); mb = board.create('segment', [mCA, B], median); mc = board.create('segment', [mAB, C], median); grass.name = 'S'; i2 = board.create('intersection', [ma, mc, 0], grass); var c; grass.name = 'U'; c = board.create('circumcircle',[A, B, C], { strokeColor: '#000000', dash: 3, strokeWidth: 1, point: grass }); var euler; euler = board.create('line', [i1, i2], { strokeWidth: 2, strokeColor:'#901B77' }); board.update(); })(); </script> </body> </html>