Zielony Smok

HTML5 canvas – tutorial

Klasa Point

Klasa opisująca punkt. Dziedziczy po Figure.

Konstruktor

0 lub 2 argumenty.

var Point = new Point(). Tworzy punkt P o współrzędnych P(0.0, 0.0).

var Point = new Point(x, y). Tworzy punkt P o podanych współrzędnych P(x, y).

Właściwości

Właściwości
Właściwość Opis Wartość lub klasa obiektu Wartość
domyślna
Przykład
x Położenie punktu na osi X. dowolna liczba rzeczywista 0.0 Rysowanie
punktu
y Położenie punktu na osi Y dowolna liczba rzeczywista 0.0
diam Średnica punktu przy rysowaniu dowolna liczba rzeczywista 5.0
shape Kształt punktu przy rysowaniu DOMString. Dozwolone wartości: "circle",
"square", "cross".
"circle"

Funkcje

Funkcje
Typ zwracany Nazwa Opis Przykład
liczba rzeczywista distance(point) Oblicza odległość tego punktu od punktu Point
podanego jako argument
Odległość między punktami
Point deepclone() Tworzy głęboką kopię tego punktu. Klonowanie głębokie
punktu
void draw(context) Odrysowuje punkt na kontekście context podanym
jako argument.
Rysowanie punktu

Listing

var Point = function() {
	var len = arguments.length;
	if (len == 0) {
		this.x = 0.0;
		this.y = 0.0;
	} else if (len == 2) {
		this.x = arguments[0];
		this.y = arguments[1];
	}
	this.diam = 5.0;// promień
	this.shape = "circle";
};
Point.prototype = new Figure();
Point.prototype.distance = function(point) {
	var a = point.x - this.x
	var b = point.y - this.y;
	return Math.sqrt(a * a + b * b);
};
Point.prototype.deepclone = function() {
	var figure = new Point();
	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.x = this.x;
	figure.y = this.y;
	figure.diam = this.diam;
	figure.shape = this.shape;
	return figure;
};
Point.prototype.draw = function(context) {
	context.save();
	context.beginPath();
	this.setProps(context);
	switch (this.shape) {
	case "circle":
		context.arc(this.x, this.y, this.diam / 2.0, 0.0, 2 * Math.PI, false);
		break;
	case "square":
		context.rect(this.x - this.diam / 2.0, this.y - this.diam / 2.0,
				this.diam, this.diam);
		break;
	case "cross":
		context.moveTo(this.x - this.diam / 2.0, this.y);
		context.lineTo(this.x + this.diam / 2.0, this.y);
		context.moveTo(this.x, this.y - this.diam / 2.0);
		context.lineTo(this.x, this.y + this.diam / 2.0);
		break;
	}
	if (this.stroke == true) {
		context.stroke();
	}
	if (this.fill == true) {
		context.fill();
	}
	context.restore();
};