Welcome to WebmasterServe!

FREE TO JOIN! Join us now to engage in informative and friendly discussions about Webmastering, SEO, SEM, Internet Marketing, Programming, Graphic Design, Online Jobs and more. What are you waiting for? Ready to join our friendly community? It takes just one minute to register.

Dismiss Notice

Join WebmasterServe Forums 
Join the discussion! Have a better idea or an opinion? It takes just one minute to register Click Here to Join

My 2 Cents Javascript image rotation script with canvas in html5

Discussion in 'Javascript and jQuery' started by JavaScriptBank, Apr 25, 2011.

Thread Status:
Not open for further replies.
  1. JavaScriptBank

    Yellow Belt

    Joined:
    Jul 11, 2009
    Messages:
    85
    Ratings:
    +0 / -0
    Rotating images is not new type of JavaScript effects because they were ever showed on jsB@nk through many JavaScript code examples:

    - detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup

    Step 1: Copy & Paste JavaScript code below in your HEAD section
    JavaScript
    Code:
    Select All
    <script type="text/javascript"> // Created by: Benoit Asselin | http://www.ab-d.fr // This script downloaded from www.JavaScriptBank.com function rotate(p_deg) { if(document.getElementById('canvas')) { /* Ok!: Firefox 2, Safari 3, Opera 9.5b2 No: Opera 9.27 */ var image = document.getElementById('image'); var canvas = document.getElementById('canvas'); var canvasContext = canvas.getContext('2d'); switch(p_deg) { default : case 0 : canvas.setAttribute('width', image.width); canvas.setAttribute('height', image.height); canvasContext.rotate(p_deg * Math.PI / 180); canvasContext.drawImage(image, 0, 0); break; case 90 : canvas.setAttribute('width', image.height); canvas.setAttribute('height', image.width); canvasContext.rotate(p_deg * Math.PI / 180); canvasContext.drawImage(image, 0, -image.height); break; case 180 : canvas.setAttribute('width', image.width); canvas.setAttribute('height', image.height); canvasContext.rotate(p_deg * Math.PI / 180); canvasContext.drawImage(image, -image.width, -image.height); break; case 270 : case -90 : canvas.setAttribute('width', image.height); canvas.setAttribute('height', image.width); canvasContext.rotate(p_deg * Math.PI / 180); canvasContext.drawImage(image, -image.width, 0); break; }; } else { /* Ok!: MSIE 6 et 7 */ var image = document.getElementById('image'); switch(p_deg) { default : case 0 : image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'; break; case 90 : image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; break; case 180 : image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; break; case 270 : case -90 : image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; break; }; }; }; // Multiple onload function created by: Simon Willison // http://simonwillison.net/2004/May/26/addLoadEvent/ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(function() { var image = document.getElementById('image'); var canvas = document.getElementById('canvas'); if(canvas.getContext) { image.style.visibility = 'hidden'; image.style.position = 'absolute'; } else { canvas.parentNode.removeChild(canvas); }; rotate(0); }); </script>
    Step 2: Place HTML below in your BODY section
    HTML
    Code:
    Select All
    <!-- /* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com */ --> <p> rotate: <input type="button" value="0°" onclick="rotate(0);"> <input type="button" value="90°" onclick="rotate(90);"> <input type="button" value="180°" onclick="rotate(180);"> <input type="button" value="-90°" onclick="rotate(-90);"> </p> <p> <img id="image" src="http://www.javascriptbank.com/templates/jsb.V8/images/logo_jsbank.jpg" alt=""> <canvas id="canvas"></canvas> </p>





     
Thread Status:
Not open for further replies.

Share This Page