Phiên bản đầy đủ: jsB@nk » Hình ảnh » Chuyển ảnh » JavaScript xoay ảnh với CANVAS trong HTML5
URL: https://www.javascriptbank.com/javascript-image-rotation-script-canvas-html5.html
Xoay ảnh với JavaScript không phải loại hiệu mới trên jsB@nk bởi chúng đã từng được giới thiệu thông qua rất đoạn mã JavaScript như: - Quay một đối tượng mà không cần ảnh - Thế giới quay - Ảnh quayTuy nhiên để bắt kịp với xu hướng của bạn bè trên khắp thế giới, jsB@nk muốn giới thiệu với bạn thêm một hiệu ứng JavaScript xoay ảnh nữa, nhưng được xây dựng trên nền HTML5 với tập lệnh canvas. Đoạn mã JavaScript xoay ảnh này khá đơn giản để bạn có thể nắm bắt cách thức sử dụng thư viện canvas trong HTML5 với các phương thức như: setAttribute, getContext, drawImage và rotate.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Chuyển ảnh » JavaScript xoay ảnh với CANVAS trong 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>