Показать сообщение отдельно
  #1 (permalink)  
Старый 29.01.2013, 11:43
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Вращение объектов c js
Можно вращать с помощью canvas (вот так) и с помощью css3

<script>
window.onload = function() {
	// получаем картинку
	var image = document.getElementById("img"); 
 
	//создаем переменную под новую картинку
	img = new Image() 
	// url картинки
	img.src = image.src;
 
	// получаем canvas элемент
	var canvas = document.getElementById("rotate"); 
 
	// устанавливем размеры canvas элемента исходя из размеров самого изображения
	canvas.width  = image.width;
	canvas.height = image.height;
 
	// создаем переменную для работы с canvas
	img.context = canvas.getContext("2d");
	img.canvas = canvas;
	img.radians = Math.PI/180; 
 
	//
	img.onload = function() {
		var _this = this;
		var _angle = 0;
 
		// устанавливаем таймер
		var timer = setInterval(function() {
			// очищаем canvas
			_this.context.clearRect(0,0,_this.width, _this.height); 
 
			// поварачиваем картинку и рисуем ее
			canvas_rotate.call(_this, _angle);
			_angle +=10;
		}, 50);
 
	}
 
}
 
function canvas_rotate(rotate) { 
	// save the current co-ordinate system 
	// before we screw with it
	this.context.save(); 
 
	// move to the middle of where we want to draw our image
	this.context.translate(this.width/2, this.height/2);
 
	// rotate around that point, converting our 
	// angle from degrees to radians 
	this.context.rotate(rotate * this.radians);
 
	// draw it up and to the left by half the width
	// and height of the image 
	this.context.drawImage(this, -(this.width/2), -(this.height/2));
 
	// and restore the co-ords to how they were when we began
	this.context.restore(); 
}
</script>
<img src='http://tsigelization.narod.ru/arrow.png' id='img'>- картинка, которую будем вращать вокруг своей оси
 
<br><br>
 
<canvas id='rotate'></canvas>


Есть ли ещё способы вращать объекты/картинки не используя 2 вышеперечисленных метода?

Последний раз редактировалось tsigel, 29.01.2013 в 11:57.
Ответить с цитированием