WaBis

walter.bislins.ch

JSG test: Path

Zeichnen von Pfaden mit Löchern. Hier wird ein Kreis mit zwei Ellipsen überlagert. Alle drei Figuren werden zunächst als Pfad zusammen gesetzt und dann halbtransparent über das Dreieck gezeichnet. Damit die Ellipsen auf allen Browsern Löcher im Kreis bilden, muss sich der Umlaufsinn von Kreis und Ellipsen unterscheiden!

JsGraph Ausgabe

Vergleichsbild

so sollte es aussehen:

JSG_Test_Path.png

Code

var DrawBorder = 1;
var FillArea   = 2;
var ClosePath  = 4;

var jsg = NewGraph2D( { Width: 600, Height: 400, BorderColor: 'black', DrawFunc: Draw } );

function Draw( jsg ) {
  jsg.SetAreaAttr( 'green', 'red', 4 );
  jsg.OpenPath();
  jsg.MoveTo( 100, 100 );
  jsg.LineTo( 500, 100 );
  jsg.LineTo( 300, 200 );
  jsg.Path( DrawBorder + FillArea + ClosePath );

  jsg.SetAreaAttr( 'yellow', 'blue', 2 );
  jsg.SetAlpha( 0.8 );
  jsg.OpenPath();
  jsg.Circle( 300, 200, -180 );
  jsg.Ellipse( 300, 200, 240, 80, 45 );
  jsg.Ellipse( 300, 200, 240, 80, -45 );
  jsg.Path( DrawBorder + FillArea );
}

Weitere Infos zur Seite
Erzeugt Dienstag, 2. Februar 2016
von wabis
Zum Seitenanfang
Geändert Dienstag, 2. Februar 2016
von wabis