Скрипт производит поворот изображения под прямым углом при одиночном клике на нем мышкой. В скрипте используется технология работы с 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.
28 июн. 2012
5,938
0
Добавить комментарий