Accueil > Unclassified > javascript 2D graphics
Unclassified

javascript 2D graphics

1. Creating a canvas

To create a graphic canvas in a calculation block, we use the function fig.

Creating a canvas

The canvas appears after the input box, and after any textual outputs. Several canvases can be created in the same calculation block; they then appear one above the other. The graphics instructions that are executed after calling fig act on the canvas that has just been created.

2. Graphic style

A graphic style is defined in a style object, whose properties are:

  • style.stroke (string): color of the lines, for example “black”
  • style.fill (string): color of filling of shapes
  • style.font (string): character font, for example “bold 12pt sans-serif”
  • style.line (integer): line thickness

3. Plot frame

The frame defines the scale of the plots. The plotframe function defines the frame:

the plotlabels function displays labels on the axes and a title:

The plotgrid function draws a grid in the frame. $

Below is an example of the use of the three previous functions:

fig(600,400)
plotframe({xmin:0,xmax:10,ymin:-1,ymax:1},{fill:”black”,font:”10pt sans-serif”})
plotgrid({nx:10,ny:10},{stroke:”#aaa”,line:1})
plotlabels({x:”x”,y:”y”,title:”titre”},{fill:”black”,font:”bold 12pt sans-serif”})

It may interest you

Leave a Reply

Your email address will not be published. Required fields are marked *

Solve : *
10 × 23 =