Koło, elipsa, odcinek i wycinek (3) (HTML5 canvas)

Koło, elipsa, odcinek i wycinek (3)

Strona używa skryptu figures.js

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");
var oval = new Oval(new Point(100,60), 50, 0, 2* Math.PI, 50, false);
oval.lineWidth=4;
  	oval.strokeStyle = "#00aaff";
   oval.stroke=true;
   oval.fillStyle="red";
   oval.fill=true;
   oval.draw(ctx);
   var oval1 = new Oval(new Point(250,60), 50, 0, 2* Math.PI, 30, false);
  	oval1.strokeStyle = "#00aaff";
   oval1.stroke=true;
   oval1.fillStyle="red";
   oval1.fill=true;
   oval1.lineWidth=4;
   oval1.draw(ctx);
   var oval2 = new Oval(new Point(100,180), 50, Math.PI/2, Math.PI, 50, false);
   oval2.strokeStyle = "#00aaff";
   oval2.stroke=true;
   oval2.fillStyle="red";
   oval2.fill=true;
   oval2.lineWidth=4;
   oval2.draw(ctx);
   var oval3 = new Oval(new Point(250,180), 50, Math.PI/2, Math.PI, 30, false);
  	oval3.strokeStyle = "#00aaff";
   oval3.stroke=true;
   oval3.fillStyle="red";
   oval3.fill=true;
   oval3.lineWidth=4;
   oval3.draw(ctx);
   var oval4 = new Oval(new Point(100,280), 50, Math.PI/2, Math.PI, 50, true);
  	oval4.strokeStyle = "#00aaff";
   oval4.stroke=true;
   oval4.fillStyle="red";
   oval4.fill=true;
   oval4.lineWidth=4;
   oval4.draw(ctx);
   var oval5 = new Oval(new Point(250,280), 50, Math.PI/2, Math.PI, 30, true);
  	oval5.strokeStyle = "#00aaff";
   oval5.stroke=true;
   oval5.fillStyle="red";
   oval5.fill=true;
   oval5.lineWidth=4;
   oval5.draw(ctx);