HTML5应用-----canvas 实例,图片旋转 IE+ FF OP CH 兼容
写在前面：以前写过一篇日志。说未来互联网的相册将可以实现任意旋转。当时还不了解javascript，如今算是略懂皮毛。在HTML5来临时代，就试试一把。
在浏览微博的时候看到很多插入图片都可以实现旋转，就好奇是怎么实现的。也想检验一下最近学习的javascript效果。记录学习过程。
HTML5中的canvas介绍是：
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
示例: 图片右旋转90度 !IE
View Code
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="700" height="433" style="border:1px solid #c3c3c3;">
你的浏览器不支持canvas 元素。
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="http://images.cnblogs.com/cnblogs_com/noyobo/328764/o_460.jpg"
cxt.rotate(90* Math.PI /180);
cxt.drawImage(img,0,-700);
</script>
</body>
</html>
用到了3个方法
getContext() 方法返回一个用于在画布上绘图的环境。
rotate() 方法旋转画布的坐标系统。
drawImage() 方法绘制一幅图像。
IE CSS滤镜中：progid:DXImageTransform.Microsoft.BasicImage(rotation='N') 旋转效果 以顺时针 90*N(Integer)
示例:图片右旋转90度 IE
点击展开
<!DOCTYPE html>
<html>
<head>
<title>IE 图片旋转滤镜</title>
<meta charset="gb2312">
<style type="text/css">
img{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation='1')}
</style>
</head>
<body>
<div class="cont">
<img id="pic_1" src="http://images.cnblogs.com/cnblogs_com/noyobo/328764/o_460.jpg" alt="">
</div>
</body>
</html>
从上述2个例子可以基本定义思路. 要对 IE 浏览器判断处理 需 记录 N 的旋转值.
!IE 浏览器中需动态更改 rotate()角度 与 drawImage() 坐标。
View Code
<!DOCTYPE html>
<html>
<head>
<title>IE 图片旋转滤镜</title>
<meta charset="gb2312">
<style>
.blue{color:blue;}
</style>
<script>
var n =0;
var ua = navigator.userAgent,
isIE =/msie/i.test(ua) &&!window.opera;
function degree(n,img){
if(isIE){
img.style.filter ='progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
}else{
if(img.parentNode.children.length ==1){
img.style.visibility ='hidden';
img.style.position ='absolute';
c = document.createElement('canvas');
img.parentNode.appendChild(c);
}
var canvasContext = c.getContext('2d');
switch(n) {
default :
case0 :
c.setAttribute('width', img.width);
c.setAttribute('height', img.height);
canvasContext.rotate(0* Math.PI /180);
canvasContext.drawImage(img, 0, 0);
break;
case1 :
c.setAttribute('width', img.height);
c.setAttribute('height', img.width);
canvasContext.rotate(90* Math.PI /180);
canvasContext.drawImage(img, 0, -img.height);
break;
case2 :
c.setAttribute('width', img.width);
c.setAttribute('height', img.height);
canvasContext.rotate(180* Math.PI /180);
canvasContext.drawImage(img, -img.width, -img.height);
break;
case3 :
c.setAttribute('width', img.height);
c.setAttribute('height', img.width);
canvasContext.rotate(270* Math.PI /180);
canvasContext.drawImage(img, -img.width, 0);
break;
};
}
}
function rotate(e){
var img = e.parentNode.parentNode.getElementsByTagName("img")[0];
if(e.className =='btnBack'){
(n==0)? n=3:n--;
degree(n,img);
} elseif(e.className =='btnPrev'){
(n==3)? n=0:n++;
degree(n,img);
}
}
</script>
</head>
<body>
<div class="picBox big">
<div class="tools">
<a class="btnBack" onclick="rotate(this)">向左转</a><span>|</span><a class="btnPrev" onclick="rotate(this)">向右转</a>
</div>
<a class="pic">
<img src="http://images.cnblogs.com/cnblogs_com/noyobo/328764/o_460.jpg" alt="">
</a>
</div>
</body>
</html>
以上实现基本原理. 如果要引用到项目中,还需要获取 相应的 canvas .
