Rysowanie trójkąta (HTML5 canvas)

Rysowanie trójkąta

Klasa 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 triangle1 = new Triangle(new Point(20, 20), new Point(50, 180),
		new Point(230, 150));
var triangle = triangle1.deepclone();
triangle.fillStyle = "red";
triangle.strokeStyle = "blue";
triangle.fill = true;
triangle.stroke = true;
triangle.lineWidth = 5;
triangle.draw(ctx);
var isTriangle = triangle.isTriangle();
ctx.fillText("czy to jest trójkąt?: "+ isTriangle, 190, 20);
var area = triangle.area();
ctx.fillText("powierzchnia trójkąta: " + area + " px",190, 40);
var perimeter = triangle.perimeter();
ctx.fillText("obwód trójkąta: " + perimeter + " px",190, 60);
var bary = triangle.barycenter();
bary.stroke=true;
bary.strokeStyle="black";
bary.shape = "cross";
bary.diam = 8;
bary.draw(ctx);
ctx.fillText("środek ciężkości : x:" + bary.x + " y:"+bary.y ,190, 80);
var triangle1 = triangle.deepclone();
triangle1.points[0].y = 220;
triangle1.points[1].y = 380;
triangle1.points[2].y = 350;
triangle1.draw(ctx);