Die folgende Grafik wurde per JavaScript mit Hilfe des JSG-Moduls generiert. Beachte dass beim Verändern der Fenstergrösse die Grösse der Grafik automatisch neu berechnet und die Grafik neu gezeichnet wird.

Weitere Beispiele

JavaScript Code

var jsg = NewGraph2D( { BorderColor: 'gray', DrawFunc: Draw, AutoScalePix: true, ScaleRef: 650 } );

function Draw(g) {

  // definiere die Abbildungstransformation
  g.SetViewportRel( 25, 20, 5, 20, true, false );
  g.SetWindow( -1.05, -1.05, 1.05, 1.05 );

  // Zeichne hellgraues Gitter
  g.SetLineAttr( '#CCC', 1 );
  g.Grid( 0.1, 0.1 );

  // Zeichne die kurzen Striche am Achsenkreuz und am Rahmen
  g.SetLineAttr( 'black', 1 );
  g.TicsX( 0, 0.1, 4, 4 );
  g.TicsX( -1.05, 0.1, 4, 0 );
  g.TicsY( 0, 0.1, 4, 4 );
  g.TicsY( -1.05, 0.1, 4, 0 );

  // Zeichne das Achsenkreuz
  g.SetAreaAttr( 'white', 'black', 2 );
  g.Axes( 0, 0, 'Arrow1', 10 );

  // Beschrifte die Achsen
  g.SetTextAttr( 'Arial', 11, 'black', 'normal', 'normal', 'center', 'middle' );
  g.TicLabelsX( 0, 0.2, -5, 1, 1, true, false );
  g.TicLabelsX( -1.05, 0.2, -3, 1, 1, false, false );
  g.TicLabelsY( 0, 0.2, -7, 1, 1, true, false );
  g.TicLabelsY( -1.05, 0.2, -4, 1, 1, false, false );

  // Zeichne den dicken Rahmen
  g.SetLineAttr( 'black', 1 );
  g.Frame();

  // Berechne und Zeichne die rote Figur
  var x, y;
  var t = 0.0;
  var dt = 0.1*Math.PI;
  var w1 = 0.1;
  var w2 = 4*w1;
  g.SetLineAttr( 'red', 2 );
  g.PenUp();
  while ( t <= 20.001*Math.PI ) {
    x = Math.sin(w1*t+0.1);
    y = Math.sin(w2*t);
    g.LineTo( x, y );
    t += dt;
  }

  // Zeichne an einigen Stellen auf der Figur Kreis-Markierungen
  g.SetMarkerAttr( 'Circle', 8, 'black', 'white', 1 );
  t = 0;
  dt = 0.4*Math.PI;
  while ( t <= 20.001*Math.PI ) {
    x = Math.sin(w1*t+0.1);
    y = Math.sin(w2*t);
    g.Marker( x, y );
    t += dt;
  }

  // Zeichne den Titel
  g.SelectTrans( 'canvas' );
  g.SetTextAttr( 'Arial', 16, 'black', 'bold', 'normal', 'center', 'top' );
  g.Text( 'This is a Title', g.CanvasWidth/2, 1 );

}