Поворот изображения на 90 градусов при клике на нем

Скрипт производит поворот изображения под прямым углом при одиночном клике на нем мышкой. В скрипте используется технология работы с canvas-элементами. Создаем в HTML-документе элемент canvas:


<canvas id="turn_img"  width="250" height="200"> </canvas>

Далее, между тегами script создаем функцию, реализующую поворот изображения:


function turn_90 () {

	var turn_img = document.getElementById("turn_img");
	var ctx = turn_img.getContext('2d');
	var img = new Image();

	// вращаемое изображение
	img.src = "images/image1.jpg";

	// положение центра по оси Х;
	var centerX = turn_img.width/2;

	// положение центра по оси У;
	var centerY = turn_img.height/2;

	// отрисовываем рисунок в центр холста;
	img.onload = function() {

		// где -100 - это width/2; -50 - height/2; 200 - width, 100 - height;
		ctx.drawImage(img,centerX-100,centerY-50,200,100);

	}

	turn_img.onclick = function() {

		ctx.clearRect(0, 0, 250, 200);
		ctx.rotate(Math.PI/2);

		// смещение оси, по которой вращается изображение
		ctx.translate(-50,-225);

		ctx.drawImage(img,centerX-100,centerY-50,200,100);
		ctx.globalCompositeOperation = "copy";

	}

}

turn_90(); // запускаем скрипт

Замечания по скрипту, предложения, и конструктивную критику жду по адресу freeden_codomaza@mail.ru.




Комментировать

captcha

Проверенные сайты



Новые отзывы о сайтах


Авторизация

Если у Вас нет учетной записи, зарегистрируйтесь

captcha

Напомнить пароль
Создание учётной записи

captcha

  Подтверждаю, что согласен с условиями политики конфиденциальности.

Напомнить пароль

captcha

Войти в личный кабинет