Jak to napisać - lepiej niż jest teraz - żeby po obróceniu figury, w kolejnej ramce zostawała obrócona? Druga sprawa - metoda translate w metodzie rotate działa dobrze tylko dla kąta 90 stopni. Czy zna ktoś wzór uniwersalny - tak, że przed obrotem nie trzeba będzie sprawdzać kąta i dostosowywać go do niego?

[JAVASCRIPT] pobierz, plaintext 
 
function GenericFigure(context) {
	this.states = ["wait", "moving", "rotating", "stop"];
	this.state = this.states[0];
	this.ctx = context;
	this.sqrW = this.sqrH = 20;
	this.ctxW = 200;
	this.ctxH = 350;
 
	this.colorsO = {
		red : "#ee1515",
		green : "#45d137",
		blue : "#17a3f3",
		orange : "#ff910f",
		purple : "#680077"
	};
 
	this.colorsA = ["#ee1515", "#45d137", "#17a3f3", "#ff910f", "#680077"];
 
	this.pickColor = function() {
		var num = Math.floor(Math.random() * 5);
		return this.colorsA[num];
	}
}
 
function Rectangle(context) {
	this.inheritFrom = GenericFigure;
	this.inheritFrom(context);
	this.width = this.sqrW;
	this.height = this.sqrH * 3;	
	this.x = this.ctxW / 2;
	this.y = 0;
	this.rotation = -1;
 
	this.setRotation = function(angle) {
		this.rotation = angle;
	}
 
	this.rotate = function() {
		this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
		this.ctx.translate(this.x + 2 * this.width, this.y - 2 * this.height + 20);
		this.ctx.rotate(this.rotation * Math.PI / 180);
		this.ctx.fillRect(this.ctxW / 2, 0, this.width, this.height);
		this.ctx.restore();
	}
 
	this.moveDown = function() {
		this.y += 20;
		this.ctx.restore();
		this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
		this.ctx.fillRect(this.x, this.y, this.width, this.height);
		this.ctx.save();
 
		if(this.rotation > -1) {
			this.rotate();
		}
		l("A");
	}
 
	this.draw = function() {
		this.ctx.fillStyle = this.pickColor();
		this.ctx.save();
		this.ctx.fillRect(this.x, this.y, this.width, this.height);
	}
}
 
//a tak można wywołać:
 
var ctx = document.getElementById("game").getContext("2d");
var rect = new Rectangle(ctx);				
      rect.draw();
 
      var inte = setInterval(function(){if(rect.y >= rect.ctxH - rect.height){clearInterval(inte);return;}if(rect.y == 60) rect.setRotation(90);rect.moveDown();}, 500);
 
[JAVASCRIPT] pobierz, plaintext 

Edit:

Kolejna rzecz:

[JAVASCRIPT] pobierz, plaintext 
 
this.ctx.translate(this.x, 0);
 
[JAVASCRIPT] pobierz, plaintext 

Wydawało mi się, że to powinno ustawić punkt obrotu na lewy górny róg figury (0, dlatego że na osi Y jest na samej górze, jak by ktoś nie wiedział ), a chyba nie ustawia, bo figura po obróceniu znajduje się dwie (swoje) wysokości niżej.

O ile pamiętam (a bawiłem się canvas już spory kawałek czasu temu), to trzeba podawać zawsze wartość kąta. Nie ma możliwości (+/-)N, ale trzeba podawać wartości absolutne.

Tak btw, czemu się nie zainteresujesz jakimś frameworkiem zaprojektowanego specjalnie dla canvas?

No tak i ten wzór który tam jest, czyli this.rotation * Math.PI / 180 wydaje się dobry - znaczy zwraca dobre wartości, a mimo to figura ląduje w zupełnie niespodziewanym miejscu. Mi chodzi o metodę obiektu ctx o nazwie translate(), której działania nie ogarniam . Uruchom ten kod, a sam zobaczysz o co mi chodzi.



Zainteresuję się, ale w takiej kolejności jak uczyłem się wszystkiego do tej pory, czyli najpierw surowa implementacja, a dopiero później jakieś frameworki. Nie chcę być jednym z tych, którzy wiedzą do czego służy $() w jQuery, a nie wiedzą do czego jest document.getElementById() w czystym js .