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

Поворот изображения на 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

Вход

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

Напомнить пароль
Регистрация
Напомнить пароль
Войти в личный кабинет