旋转图像各种角度的功能

Question

I am working on coding a research experiment where one of several preloaded images can be displayed rotated at a multiple of 45 degrees. Is there a function for doing this so I could have say

var img45 = function(img, deg) { ...

I need to be able to pass the pre-rotated images as variables to a different function.

I can't use CSS' transform since the same image needs to be available at several different angles and I can't just transform the canvas display because I need the pre-rotated images as variables.

Rotate() works but does not let me assign the picture to a new variable, it instead modifies the original image, which is not what I want (I need the original to be unmodified).

Answer 1

var img45 = function(img_id, angle) {
    $('#'+img_id).rotate(angle);
}

Is this what you need? It's jQuery, so you need to include jQuery's library.

Answer 2

Something like this?

 // Function to rotate element. var rotate = function(elem, deg) { elem.style.transform = 'rotate(' + deg + ')'; } // Test rotating boxes var boxes = document.querySelectorAll('.box'); for (var i = 1; i <= boxes.length; ++i) { rotate(boxes[i], (5 * i) + 'deg'); } 

 .box { width: 128px; height: 128px; border: 1px solid #ddd; margin: 10px; } 

 <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div>