Zielony Smok

HTML5 canvas – tutorial

Klasa Star

Klasa opisująca gwiazdę. Różnica między wielokątem gwiaździstym i gwiazdą polega na tym, że w tym pierwszym parametry figury wyznaczają promień wewnętrzny. W gwieździe promień zewnętrzny i wewnętrzny są ustalane przez użytkownika. Dziedziczy po Figure.

Konstruktor

0 lub 4 argumenty.

var star = new Star(). Tworzy zerową gwiazdę.

var star = new Star(new Point(x,y), outerR, innerR, apices). Przyjmuje punkt Point stanowiący środek wielokąta, outerR – promień zewnętrzny, innerR – promień wewnętrzny, apices – liczba wierzchołków.

Właściwości

Właściwości
Właściwość Opis Wartość lub klasa obiektu Wartość
domyślna
points tablica zawierająca punkty Point będące
wierzchołkami zewnętrznymi.
Array []
points1 tablica zawierająca punkty Point będące
wierzchołami wewnętrznymi.
Array []
center punkt Point wyznaczający środek wielokąta Point
outerR promień okręgu opisanego na wielokącie liczba rzeczywista
innerR promień okręgu wpisanego w wielokąt liczba rzeczywista
apices liczba wierzchołków (promieni) liczba całkowita
alfa kąt obliczany jako 360.0/apices liczba rzeczywista

Funkcje

Funkcje
Typ zwracany Nazwa Opis Przykład
Star deepclone() Tworzy głęboką kopię tego wielokąta. Rysowanie gwiazdy
Point barycenter() Zwraca punkt Point będący środkiem (ciężkości)
tego wielokąta.
void draw(context) Rysuje wielokąt.

Listing

var Star = function() {
this.points = [];
this.points1 = [];
var len = arguments.length;
if (len == 0) {
	this.center = new Point(0, 0);// środek wielokąta
	this.outerR = 0.0;// średnica zewnętrzna
	this.innerR = 0.0; // średnica wewnętrzna
	this.apices = 0; // liczba promieni (wierzchołków)
	this.points[0] = new Point(0.0, 0.0);
	this.alfa = 0.0;
} else if (len == 4) {
	this.center = new Point(arguments[0].x, arguments[0].y)
	this.outerR = arguments[1]// promień okręgu opisanego
	this.innerR = arguments[2];// promień okręgu wpisanego
	this.apices = arguments[3];// liczba promieni (wierzchołków)
	this.alfa = 360.0 / this.apices;
	var r = 0.5 * this.outerR;
	for (var i = 0; i < this.apices; i++) {
		this.points[i] = new Point(this.center.x + r
		* Math.cos(degToRad(this.alfa * i)), this.center.y + r
		* Math.sin(degToRad(this.alfa * i)));
		this.points1[i] = new Point(this.center.x + this.innerR / 2.0
		* Math.cos(degToRad((this.alfa * i) + 0.5 * this.alfa)),
		this.center.y
		+ this.innerR/ 2.0
		* Math.sin(degToRad((this.alfa * i) + 0.5
		* this.alfa)));
	}
}
};
Star.prototype = new Figure();
Star.prototype.deepclone = function() {
var figure = new StarPolygon();
figure.globalAlpha = this.globalAplpha;
figure.globalCompositeOperation = 
           this.globalCompositeOperation;
figure.strokeStyle = this.strokeStyle;
figure.fillStyle = this.fillStyle;
figure.shadowOffsetX = this.shadowOffsetX;
figure.shadowOffsetY = this.shadowOffsetY;
figure.shadowBlur = this.shadowBlur;
figure.shadowColor = this.shadowColor;
figure.lineWidth = this.lineWidth;
figure.lineCap = this.lineCap;
figure.lineJoin = this.lineJoin;
figure.miterLimit = this.miterLimit;
figure.lineDashOffset = this.lineDashOffset;
figure.lineDashSegments = [];
for (var i = 0; i < this.lineDashSegments.length; i++) {
	figure.lineDashSegments[i] = this.lineDashSegments[i];
}
figure.fill = this.fill;
figure.stroke = this.stroke;
figure.points = [];
for (var i = 0; i < this.points.length; i++) {
	figure.points[i] = new Point(this.points[i].x, 
          this.points[i].y);
}
figure.points1 = [];
for (var i = 0; i < this.points1.length; i++) {
	figure.points1[i] = new Point(this.points1[i].x, 
           this.points1[i].y);
}
figure.center = new Point(this.center.x, this.center.y);
figure.outerR = this.outerR;
figure.innerR = this.innerR;
figure.apices = this.apices;
figure.alfa = this.alfa;
return figure;
};
Star.prototype.barycenter = function() {
return new Point(this.center.x, this.center.y);
};

Star.prototype.draw = function(context) {
context.save();
context.beginPath();
this.setProps(context);
context.moveTo(this.points1[this.apices - 1].x,
		this.points1[this.apices - 1].y);
for (var i = this.apices - 1; i > 0; i--) {
	context.lineTo(this.points[i].x, this.points[i].y);
	context.lineTo(this.points1[i - 1].x, this.points1[i - 1].y);
}
context.lineTo(this.points[0].x, this.points[0].y);
context.closePath();
if (this.stroke == true) {
	context.stroke();
}
if (this.fill == true) {
	context.fill();
}
context.restore();
};