您的位置：首页 > Web前端 > HTML5

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

2011-10-19 03:48 846 查看

写在前面：以前写过一篇日志。说未来互联网的相册将可以实现任意旋转。当时还不了解javascript，如今算是略懂皮毛。在HTML5来临时代，就试试一把。

在浏览微博的时候看到很多插入图片都可以实现旋转，就好奇是怎么实现的。也想检验一下最近学习的javascript效果。记录学习过程。

HTML5中的canvas介绍是：

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

示例: 图片右旋转90度 !IE

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>

// 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 :
case 0 :
c.setAttribute('width', img.width);
c.setAttribute('height', img.height);
canvasContext.rotate(0 * Math.PI / 180);
canvasContext.drawImage(img, 0, 0);
break;
case 1 :
c.setAttribute('width', img.height);
c.setAttribute('height', img.width);
canvasContext.rotate(90 * Math.PI / 180);
canvasContext.drawImage(img, 0, -img.height);
break;
case 2 :
c.setAttribute('width', img.width);
c.setAttribute('height', img.height);
canvasContext.rotate(180 * Math.PI / 180);
canvasContext.drawImage(img, -img.width, -img.height);
break;
case 3 :
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);
} else if(e.className == 'btnPrev'){
(n==3)? n=0:n++;
degree(n,img);
}
}
// ]]>

向左转|向右转

以上实现基本原理. 如果要引用到项目中,还需要获取相应的 canvas .

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航