DZone Snippets: html5 code

DZone Snippets: html5 code http://snippets.dzone.com/posts Thu, 21 Aug 2008 15:46:34 GMT DZone Snippets: html5 code Image Rotate with CANVAS http://snippets.dzone.com/posts/show/5514 <code> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /> <br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <br /><head> <br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br /> <title>rotate()</title> <br /> <br /> <style type="text/css" media="screen"> <br /> img, canvas { border: 1px solid black; } <br /> </style> <br /> <br /> <br /><script type="text/javascript"> <br /> <br />function rotate(p_deg) { <br /> if(document.getElementById('canvas')) { <br /> /* <br /> Ok!: Firefox 2, Safari 3, Opera 9.5b2 <br /> No: Opera 9.27 <br /> */ <br /> var image = document.getElementById('image'); <br /> var canvas = document.getElementById('canvas'); <br /> var canvasContext = canvas.getContext('2d'); <br /> <br /> switch(p_deg) { <br /> default : <br /> case 0 : <br /> canvas.setAttribute('width', image.width); <br /> canvas.setAttribute('height', image.height); <br /> canvasContext.rotate(p_deg * Math.PI / 180); <br /> canvasContext.drawImage(image, 0, 0); <br /> break; <br /> case 90 : <br /> canvas.setAttribute('width', image.height); <br /> canvas.setAttribute('height', image.width); <br /> canvasContext.rotate(p_deg * Math.PI / 180); <br /> canvasContext.drawImage(image, 0, -image.height); <br /> break; <br /> case 180 : <br /> canvas.setAttribute('width', image.width); <br /> canvas.setAttribute('height', image.height); <br /> canvasContext.rotate(p_deg * Math.PI / 180); <br /> canvasContext.drawImage(image, -image.width, -image.height); <br /> break; <br /> case 270 : <br /> case -90 : <br /> canvas.setAttribute('width', image.height); <br /> canvas.setAttribute('height', image.width); <br /> canvasContext.rotate(p_deg * Math.PI / 180); <br /> canvasContext.drawImage(image, -image.width, 0); <br /> break; <br /> }; <br /> <br /> } else { <br /> /* <br /> Ok!: MSIE 6 et 7 <br /> */ <br /> var image = document.getElementById('image'); <br /> switch(p_deg) { <br /> default : <br /> case 0 : <br /> image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'; <br /> break; <br /> case 90 : <br /> image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; <br /> break; <br /> case 180 : <br /> image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; <br /> break; <br /> case 270 : <br /> case -90 : <br /> image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; <br /> break; <br /> }; <br /> <br /> }; <br />}; <br /> <br /> <br />window.onload = function() { <br /> var image = document.getElementById('image'); <br /> var canvas = document.getElementById('canvas'); <br /> if(canvas.getContext) { <br /> image.style.visibility = 'hidden'; <br /> image.style.position = 'absolute'; <br /> } else { <br /> canvas.parentNode.removeChild(canvas); <br /> }; <br /> <br /> rotate(0); <br />}; <br /> <br /></script> <br /> <br /></head> <br /> <br /><body> <br /> <br /> <br /><p> <br /> rotate: <br /> <input type="button" value="0°" onclick="rotate(0);" /> <br /> <input type="button" value="90°" onclick="rotate(90);" /> <br /> <input type="button" value="180°" onclick="rotate(180);" /> <br /> <input type="button" value="-90°" onclick="rotate(-90);" /> <br /></p> <br /> <br /> <br /><p> <br /> <img id="image" src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /> <br /> <canvas id="canvas"></canvas> <br /></p> <br /> <br /> <br /></body> <br /></html> <br /></code> <br /> <br /><a href="http://www.ab-d.fr">Source: AB-D.fr</a> - <a href="http://www.ab-d.fr/date/2008-05-18/">Effectuer une rotation d'image en CSS ( rotate balise canvas HTML5 )</a> Sun, 18 May 2008 15:22:51 GMT http://snippets.dzone.com/posts/show/5514 ki4ngel (Benoit Asselin)