JavaScript combined with canvas to achieve image rotation effect _javascript skills

On Weibo, we can rotate the picture to the left and turn right, so that the user can appreciate the picture effect from different angles. This article will combine examples to explain how you can use JavaScript to combine related techniques to achieve a picture's rotation effect. We use the HTML5 canvas tag to rotate the picture, and for ie6,7,8 browsers that do not support HTML5, we use IE's unique filter effect to rotate the picture.

Html

We placed a picture on the page, placed two buttons above the picture, and called the Rotate () function through the OnClick event to control the picture to the left and right.

<div id= "Tool" > 
   <a href= "#" id= "Arr_left" onclick= "rotate (' myimg ', ' left ')" > Leftwards </a> 
   <a href= "#" id= "arr_right" onclick= "rotate (' myimg ', ' right ') '" > Rightwards </a> 
</div> 
<div id= "img" > 
    
</div> 

Javascript

function Rotate (obj,arr) { 
  var img = document.getElementById (obj); 
  if (!img | |!arr) return false; 
  var n = img.getattribute (' step '); 
  if (n== null) n=0; 
  if (arr== ' left ') { 
    (n==0)? n=3:n--; 
  } else if (arr== ' right ') { 
    (n==3)? n=0:n++; 
  } 
  Img.setattribute (' Step ', n); 
  ... 
} 

We wrote a custom function rotate (), where parameter obj represents the ID of the picture object to rotate, and the parameter arr represents the direction of rotation, fixing two values: Left and right. We set the variable N in order to record up and down about four kinds of rotation state, click on the Rotation button to ensure the continuous rotation of the state, that is, each rotation is the last rotation after the operation on the basis of the rotation again.

Then, we will be different according to the browser different processing, for IE browser, you can use their unique filters to achieve the rotation effect, although we do not recommend the use of filters, but in order to compatible with the old version of IE, we have to redo this old knife.

function Rotate (obj,arr) { 
  ... 
  Use filters for IE browsers to rotate 
  if (document.all) { 
    img.style.filter = ' Progid:DXImageTransform.Microsoft.BasicImage ( Rotation= ' + n + ') '; 
  Rotate the elements of a modern browser writing to HTML5: Canvas 
  }else{ 
    ... 
  } 
} 

In code, we use document.all to determine if it's IE, if we use filters, and for modern browsers such as Firefox and Chrome, we use canvas to achieve the effect of rotation.

function Rotate (obj,arr) {...//rotate the elements written to the HTML5 by the modern browser: Canvas}else{var c = document.getElementById (' Canva 
    S_ ' +obj); 
      if (c== null) {img.style.visibility = ' hidden '; 
      img.style.position = ' absolute '; 
      c = document.createelement (' canvas '); 
      C.setattribute ("id", ' canvas_ ' +obj); 
    Img.parentNode.appendChild (c); 
    var canvascontext = C.getcontext (' 2d '); 
        Switch (n) {default:case 0:c.setattribute (' width ', img.width); 
        C.setattribute (' height ', img.height); 
        Canvascontext.rotate (0 * math.pi/180); 
        Canvascontext.drawimage (IMG, 0, 0); 
      Break 
        Case 1:c.setattribute (' width ', img.height); 
        C.setattribute (' height ', img.width); 
        Canvascontext.rotate (math.pi/180); 
        Canvascontext.drawimage (IMG, 0,-img.height); 
      Break 
        Case 2:c.setattribute (' width ', img.width); C.setattribute (' height ', img.height);
        Canvascontext.rotate (180 * math.pi/180); 
        Canvascontext.drawimage (IMG,-img.width,-img.height); 
      Break 
        Case 3:c.setattribute (' width ', img.height); 
        C.setattribute (' height ', img.width); 
        Canvascontext.rotate (270 * math.pi/180); 
        Canvascontext.drawimage (IMG,-img.width, 0); 
    Break 
  }; 
 } 
}

In the code, we create the canvas element object and assign the picture to the canvas object, and when the variable n is in a different state (up or down four directions), use canvas to redraw the image.

Of course, the image of the rotation effect also has a solution, around the HTML5, for different browsers, such as Firefox can be used under the-moz-transform:rotate (); WebKit can be used-webkit-transform:rotate (); But this is not as good as the canvas of HTML5.

The above is the article to share all the content, I hope you can enjoy.