Существуют две основные команды:

1. Команда создания элемента
    

   var el = brd.create('type',[parents],{attributes});

   где type — тип объекта (точка, линия и так далее),
   [parents] — массив родительских элеметнтов (например, две точки для линии),
   attributes — атрибуты (их рассмотрим позже).

2. Команда задания свойств элемента
    

   el.setProperty({key1:value1,key2:value2,...});

   где keyN — имя энного свойства, valueN — значение энного свойства.

Точка

Простейшая команда создания точки выглядит так:
 

var el = brd.create('point',[x, y]);

Имя точки задаётся с помощью атрибута name (например, {name:'A'}).

Точки могут быть свободными (их можно двигать мышкой), фиксированными (их двигать мышкой невозможно) и зависимыми (их движение зависит от движения другого объекта, а мышкой их двигать тоже невозможно).

По умолчанию создаётся свободная точка:
 

var p0 = board.create('point',[-1, 1], {name:'A'});

Если атрибуту fixed присвоить значение true, то будет создана фиксированная точка:
 

var pl = board.create('point',[1, -1], {name:'B', fixed:true});

Если в качестве значения хотя бы одной из коордитнат точки задать функцию без параметров, возвращающую число, то будет создана зависимая точка:
 

var p2 = board.create('point',[function(){return p0.X()}, -2], {name:'С'});

Вот так это выглядит в JSFiddle: jsfiddle.net/AndreyDolgov/fbha4/embedded/result%2Chtml%2Cjs/.
На чертеже точка A — свободная, точка B — фиксированная, точка C — зависимая от точки A.

 

Прямая, луч, отрезок

Прямая может быть задана двумя способами:
 

• Двумя точками
   

  board.create('line',[point1, point2])

  Точки могут быть заданы или именами объектов, или непосредственно координатами (в этом случае точка невидима).

• Уравенением ax+by+c=0 (обратите внимание на порядок коэффициентов в команде)
   

   board.create('line',[c, a, b]) 

Примеры:
 

var p1 = board.create('point',[0,0],{name:'A'});
var p2 = board.create('point',[3,2],{name:'B'});
var l1 = board.create('line',[p1,p2]);
var l2 = board.create('line',[p1,[1,5]]);

В JSFiddle: fiddle.jshell.net/AndreyDolgov/tybTW/show/light/.
 

var l3 = board.create('line',[-1.0,-2.0,1.0]);

В JSFiddle: fiddle.jshell.net/AndreyDolgov/2A8Xa/show/light/.

Луч и отрезок с точки зрения JSXGraph – это те же прямые, но с другими атрибутамиstraightFirst и straightLast. Если один из этих атрибутов равен false, то мы получим луч, если оба – отрезок.

Пример:
 

var p1 = board.create('point',[-2,-1],{name:'A'});
var p2 = board.create('point',[3,-2],{name:'B'});
var p3 = board.create('point',[-3,2],{name:'C'});
var l1 = board.create('line',[p1,p2],{straightFirst:false});
var l2 = board.create('line',[p1,p3],{straightLast:false});
var l3 = board.create('line',[p2,p3],{straightFirst:false,straightLast:false});

В JSFiddle: fiddle.jshell.net/AndreyDolgov/yKxku/show/light/.

 

Окружность

Окружность может быть построена четырьмя способами:
 

1. По центру и точке на окружности.
    

   board.create('circle',[centerPoint,pointOnCircle]);

   Если аргументов два, то они интерпретинуются как центр и точка на окружнсти.
   Например:
    

   var center = board.create('point',[3,3],{name:'O'});
   var ptOnCir = board.create('point',[4,5],{name:'A'});
   var с = board.create('circle',[center,ptOnCir]);

   В JSFiddle: fiddle.jshell.net/AndreyDolgov/A3JMq/show/light/.
   Как всегда, точка может быть задана или именем переменной, или непосредственно координатами. Если точка задана непосредственно координатами, она не видна.
   Например:
    

   var theCircle = board.create('circle',[[3,3],[4,5]]);

   В JSFiddle: fiddle.jshell.net/AndreyDolgov/9FgfW/show/light/.

2. По центру и радиусу.
    

   board.create('circle',[centerPoint,radiusOfCircle]);

   Когда второй аргумент является числом, оно интерпретируется как радиус.
   Например:
    

   var center = board.create('point',[3,3]);var theCircle = board.create('circle',[center,1]);

   В JSFiddle: fiddle.jshell.net/AndreyDolgov/VSRUx/show/light/.

3. По центру и другой окружности с известным радиусом.
    

   board.create('circle',[centerPoint,circleWithDesiredRadius]);

   Если второй аргумент – это окружность, то ее радиус используется для построения новой окружности.
   Например:
    

   var circle1 = board.create('circle',[[0,1],[0,2]]);var circle2 = board.create('circle',[[0,3],circle1]);

   В JSFiddle: fiddle.jshell.net/AndreyDolgov/aYezn/show/light/.

4. По трём точкам.
    

   board.create('circle',[point1,point2,point3]);

   Если аргументов три, то они интерпретируются как три точки, через которые строится окружность.
   Например:
    

   var p1 = board.create('point',[2,1],{name:'p1',size:2});
   var p2 = board.create('point',[2,5],{name:'p2',size:2});
   var p3 = board.create('point',[4,3],{name:'p3',size:2});
   var c = board.create('circle',[p1,p2,p3]);

   В JSFiddle: fiddle.jshell.net/AndreyDolgov/vRW3z/show/light/

Многоугольник

Многоугольник задают массивом вершин.
 

board.create('polygon',[ptVertex1,ptVertex2,...]);

При этом первым и последним элементом массива должна былть одна и та же вершина. Если этого не сделать, то первая вершина автоматически дублируются в качестве последней.
Пример:
 

p1 = board.create('point',[0,0],{name:''});
p2 = board.create('point',[1,3],{name:''});
p3 = board.create('point',[5,5],{name:''});
p4 = board.create('point',[4,2],{name:''});
board.create('polygon',[p1,p2,p3,p4]);

В JSFiddle: jsfiddle.net/AndreyDolgov/Fp3VM/show/light/.

 

Коническое сечение

Может быть задано двумя способами:
 

1. Пятью точками
    

   board.create('conic',[point1,point2,point3,point4,point5]);

2. Шестью элементами матрицы
    

   board.create('conic',[a11,a22,a33,a21,a31,a32]);

Примеры:
 

p1 = board.create('point',[0,0],{name:'p1'});
p2 = board.create('point',[1,1],{name:'p2'});
board.create('line',[p1,p2],{strokeWidth:1, color:'yellow'});
p3 = board.create('point',[2,3],{name:'p3'});
p4 = board.create('point',[3,4],{name:'p4'});
p5 = board.create('point',[4,1],{name:'p5'});
board.create('conic',[p1,p2,p3,p4,p5], {strokeWidth:4,strokeColor:'green'});

Получим (JSFiddle): jsfiddle.net/AndreyDolgov/DdqvM/show/light/
 

board.create('conic',[9,4,-11,0,-9,-8]);

Получим: jsfiddle.net/AndreyDolgov/4jTQY/show/light/.

 

Кривая

Существуют три типа кривых:
 

1. Параметрические кривые.
    

   board.create('curve',[x,y,a,b]);

   где x и y — функции с одним параметром, возвращающие число, a и b задают интервал значений параметра.

2. Полярные кривые.
    

   board.create('curve',[functionOfTheta,[xOrigin,yOrigin],optBegValTheta,optEndValTheta]);

   где functionOfTheta — функция, аргумент которой — это угол и которая возвращает расстояние от полюса;
   [xOrigin,yOrigin] — координаты полюса;
   optBegValTheta и optEndValTheta задают интервал значений угла..

3. Графическое представление данных в виде ломаной линии.
    

   board.create('curve',[xArray,yArray]);

   где xArray и yArray — массив иксов и массив игреков..

Примеры:
 

board.create('curve', [function(t){return 3*Math.cos(t);}, function(t){ return 3*Math.sin(t);}, 0, Math.PI/2]);

Вот так это будет выглядеть в JSFiddle: jsfiddle.net/AndreyDolgov/9mcAs/show/light/.
 

board.create('curve', [function(theta){return theta/17;}, [-2,-1], -8*Math.PI, 8*Math.PI]);

Вот так это будет выглядеть в JSFiddle: jsfiddle.net/AndreyDolgov/XKH6Q/show/light/.
 

x = [-4,-3,-2,-1,0,1,2,3,5];
y = [-3,2,3,-1,0,2,1,4,0];
board.create('curve',[x,y]); 

Вот так это будет выглядеть в JSFiddle: jsfiddle.net/AndreyDolgov/uKFFV/show/light/.

 

График функции

board.create('functiongraph',[functionRule,a,b]);

где functionRule — функция одного аргумента, возвращающая число,
a и b задают интервал, на котором определена функция.
Пример:
 

board.create('functiongraph', [function(x){ return (x+1)%(x-1);},1,3]);

Вот так это будет выглядеть: jsfiddle.net/AndreyDolgov/gkfqj/show/light/.

 

Текст

board.create('text',[x,y,stringText]);

где первые два аргумента задают положение левого нижнего угла области текста, stringText — строка или функция, возвращающая строку.
Пример:
 

board.create('text',[-5, 2, "<span style='color:yellow;background-color:blue; font-size:50px;'>Это<br>текст.</span>"]);

Получим: jsfiddle.net/AndreyDolgov/YpQkL/show/light/.