»
Tiếng AnhTiếng PhápTiếng Việt

In - JavaScript xoay ảnh với CANVAS trong HTML5 - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Hình ảnh » Chuyển ảnh » JavaScript xoay ảnh với CANVAS trong HTML5
URL: http://www.javascriptbank.com/javascript-image-rotation-script-canvas-html5.html

JavaScript xoay ảnh với CANVAS trong HTML5 © JavaScriptBank.comXoay ả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: http://www.javascriptbank.com/javascript-image-rotation-script-canvas-html5.html



JavaScript
<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>


HTML
<!--/*     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>