HTML5 canvas 2d / JavaScript

Zielony Smok - logo witryny

Klasa Figure

Klasa opisująca figury geometryczne. Jest podstawą do dziedziczenia dla konkretnych klas geometrycznych.

Właściwości

Właściwości
Właściwość Opis Wartość lub klasa obiektu Wartość
domyślna
globalAlpha Właściwość kontekstu. Przezroczystość obowiązująca dla
wszystkich konturów i wypełnień 		dowolna liczba rzeczywista od <0.0, 1.0> 1.0
globalCompositeOperation Właściwość kontekstu. Określa obowiązującą zasadę składania
kolorów dla wszystkich figur i obrazów wyświetlanych na canvas 		DOMString "source-over”
fillStyle Właściwość kontekstu. Określa kolor lub styl obowiązujący
dla wypełnień.		 DOMString (kolor CSS) "black"
strokeStyle Właściwość kontekstu. Określa kolor lub styl dla
konturu(obwiedni)

DOMString
kolor CSS)

 "black"
shadowOffsetX Właściwość kontekstu. Określa przesunięcie cienia względem
figury w osi X		 dowolna liczba rzeczywista 0.0
shadowOffsetY Właściwość kontekstu. Określa przesunięcie cienia względem
figury w osi Y		 dowolna liczba rzeczywista 0.0
shadowBlur Właściwość kontekstu. Określa wielkość (szerokość) cienia dowolna liczba rzeczywista 0.0
shadowColor Właściwość kontekstu. Określa kolor cienia DOMString (kolor CSS) 0.0
lineWidth Właściwość kontekstu. Określa grubość linii dowolna liczba rzeczywista 1.0
lineCap Właściwość kontekstu. Określa kształt zakończenia linii. DOMString. Dozwolone wartości to:
"butt",
"round" i "square" 		"butt"
lineJoin Właściwość kontekstu. Określa sposób wyświetlania złączeń
linii (narożników)		 DOMString. Dozwolone wartości to: "round",
"bevel" i "miter".		 "miter"
miterLimit Właściwość kontekstu. Określa maksymalną długość, o którą
linia może być przedłużona jeśli ‘lineJoin’ jest ustawione na
"miter’. Jeśli długość niezbędna do połączenia jest większa
niż podana wartość – połączenie nie zostanie wykonane.		 dowolna liczba rzeczywista 10.0
lineDashOffset Właściwość kontekstu. Określa odstęp między segmentami
linii przerywanej.		 dowolna liczba rzeczywista 5.0
lineDashSegments Argument metody kontekstu setLineDash(lineDashSegments) tablica dowolnych liczb rzeczywistych. Określa liczbę i
wymiary odcinków tworzących linię przerywaną. Po wyczerpaniu listy
segmenty powtarzają się od początku listy.		 []
fill Określa czy figura będzie miała wypełnienie. Wartość boolean. Może być "true" lub
"false".		 false
stroke Określa czy figura będzie miała kontur. Wartość boolean. Może być "true" lub
"false".		 false

Funkcje

Funkcje
Typ zwracany Nazwa Opis
void setProps(context) Wartości właściwości kontekstu na którym będzie rysowana
figura są zastępowane wartościami właściwości figury.

Listing

var Figure = function() {
	this.globalAlpha = 1.0;
	this.globalCompositeOperation = "source-over";
	this.strokeStyle = "black";
	this.fillStyle = "black";
	this.shadowOffsetX = 0.0;
	this.shadowOffsetY = 0.0;
	this.shadowBlur = 0.0;
	this.shadowColor = "black";
	this.lineWidth = 1.0;
	this.lineCap = "butt";
	this.lineJoin = "miter";
	this.miterLimit = 10.0;
	this.lineDashOffset = 5.0;
	this.lineDashSegments = [];
	this.fill = false;
	this.stroke = false;
};
Figure.prototype.setProps = function(context) {
	context.globalAlpha = this.globalAlpha;
	context.globalCompositeOperation = this.globalCompositeOperation;
	context.strokeStyle = this.strokeStyle;
	context.fillStyle = this.fillStyle;
	context.shadowOffsetX = this.shadowOffsetX;
	context.shadowOffsetY = this.shadowOffsetY;
	context.shadowBlur = this.shadowBlur;
	context.shadowColor = this.shadowColor;
	context.lineWidth = this.lineWidth;
	context.lineCap = this.lineCap;
	context.lineJoin = this.lineJoin;
	context.miterLimit = this.miterLimit;
	context.lineDashOffset = this.lineDashOffset;
	context.lineDashSegments = this.lineDashSegments;
};