Wymaga dodania skryptu figures.js, który znajduje się tutaj:
Skrypty JavaScript do części 2
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 rectangle = new Rectangle(20, 20, 140,100);			
rectangle.fillStyle = "red";
rectangle.strokeStyle = "blue";
rectangle.fill = true;
rectangle.stroke = true;
rectangle.lineWidth = 5;
rectangle.draw(ctx);
//-
var bary = rectangle.barycenter();
bary.shape="cross";
bary.diam = 8;
bary.fillStyle="black";
bary.stroke=true;
bary.draw(ctx);
//
var area = rectangle.area();
ctx.fillText("powierzchnia: " + area + " px", 200, 20);
var perimeter = rectangle.perimeter();
ctx.fillText("obwód: " + perimeter + " px", 200, 40);
var diagonal = rectangle.diagonal();
ctx.fillText("przekątna: " + diagonal + " px", 200, 60);
var rectangle1 = rectangle.deepclone();
rectangle1.points[0].y = 160;
rectangle1.points[1].y = 160;
rectangle1.points[2].y = 260;
rectangle1.points[3].y = 260;
rectangle1.draw(ctx);		
            

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *