Shulou(Shulou.com)06/03 Report--

Javascript and HTML5 canvas to achieve the effect of picture rotation, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

On Weibo, we can perform rotation operations such as turning left to right, so that users can enjoy the effect of the picture from different perspectives. This article will show you how to use Javascript combined with related technologies to achieve the image rotation effect with an example. We use HTML5's canvas tag to rotate the image. For browsers where ie6,7,8 does not support HTML5, we use IE's unique filter effect to achieve.

HTML

We place a picture on the page, place two buttons on top of the picture, and call the rotate () function through the onclick event to control the rotation of the image from left to right.

To the right

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)? Else if (arr=='right') {(nails) 3)? Img.setAttribute ('step',n);...}

We write a custom function rotate (), where the parameter obj represents the id of the image object to be rotated, and the parameter arr represents the rotation direction, fixing two values: left (left) and right (right). We set the variable n to record the four rotation states up and down, left and right. When you click the rotate button, you can ensure a continuous rotation, that is, each rotation is based on the last rotation operation.

Then, we have to deal with it differently according to different browsers. For IE browsers, we can use their unique filters to achieve the rotation effect. Although we do not recommend using filters, we have to use this old knife again in order to be compatible with the old version of IE.

Function rotate (obj,arr) {... / A pair of IE browsers use filters to rotate if (document.all) {img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage (rotation='+ n +')'; / / A pair of elements written to HTML5 by modern browsers: canvas} else {...}

In the code, we use document.all to determine whether it is an IE browser, and if so, a filter, while for modern browsers such as firefox and chrome, we use canvas to achieve the rotation effect.

Function rotate (obj,arr) {. / / A pair of elements written to HTML5 by modern browsers are rotated: canvas} else {var c = document.getElementById ('canvas_'+obj); if (null = null) {img.style.visibility =' hidden'; img.style.position = 'absolute'; c = document.createElement (' canvas'); c.setAttribute ("id", 'canvas_'+obj); IMG [XSS _ clean] .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 (90 * 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. When the variable n is in different states (up, down, left, right, left and right), we use canvas to redraw the image. About the use of canvas tags, you can refer to the following site article: HTML5 canvas Canvas.

Of course, there is also a solution for image rotation, bypassing html5, for different browsers, such as-moz-transform: rotate () under firefox; webkit can use-webkit-transform: rotate (); but this is not as effective as html5's canvas.

After reading the above, have you mastered the canvas of Javascript and HTML5 to achieve the image rotation effect? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.