Full version: jsB@nk » Image » Rotation » JavaScript Image Rotation script with CANVAS in HTML5
URL: https://www.javascriptbank.com/javascript-image-rotation-script-canvas-html5.html
Rotating images is not new type of JavaScript effects because they were ever showed on jsB@nk through many JavaScript code examples: - Image rotation without images - Worldmap with rotating resize-animation - Rotating GIFs and JPGsHowever, in order to catch the friend's trend around the world, jsB@nk is pleasure to present you one more new JavaScript image rotation script, but it's made with canvas in HTML5 (HTML5 rotate image). This JavaScript image rotate effect is very simple, so you can easily master some canvas methods such as: setAttribute, getContext, drawImage and rotate.
Full version: jsB@nk » Image » Rotation » JavaScript Image Rotation script with CANVAS in HTML5
URL: https://www.javascriptbank.com/javascript-image-rotation-script-canvas-html5.html
<script type="text/javascript">// Created by: Benoit Asselin | http://www.ab-d.fr// This script downloaded from www.JavaScriptBank.comfunction rotate(p_deg) {if(document.getElementById('canvas')) {/*Ok!: Firefox 2, Safari 3, Opera 9.5b2No: 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><!--/* 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>