HTML5应用-----canvas 实例,图片旋转 IE+ FF OP CH 兼容

最新推荐文章于 2024-11-12 11:19:19 发布

weixin_30755393

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量82

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/noyobo/archive/2011/10/19/2217150.html

版权

写在前面：以前写过一篇日志。说未来互联网的相册将可以实现任意旋转。当时还不了解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>