Version complète: jsB@nk » Image » Rotation » JavaScript Image Rotation script avec toile en HTML5
URL: https://www.javascriptbank.com/javascript-image-rotation-script-canvas-html5.html
Rotation des images n'est pas nouveau type d'effets JavaScript parce qu'ils ont jamais montr? sur ACC @ nk ? travers de nombreux exemples de code JavaScript:
Rotation d'image sans images
? Carte du monde avec rotation redimensionner l'animation
? GIF et JPG tournantes
script JavaScript rotation de l'image, Mais c'est fait avec en toile de HTML5 ( HTML5 rotation de l'image ).
Version complète: jsB@nk » Image » Rotation » JavaScript Image Rotation script avec toile en 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>