javascript结合canvas实现图片旋转效果
作者:hebedich 发布时间:2023-08-07 23:47:59
我们在微博上可以对图片进行向左转向右转等旋转操作,让用户可以从不同的视角欣赏图片效果。本文将结合实例为您讲解如何使用Javascript结合相关技术来实现图片的旋转效果。我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie6,7,8不支持HTML5的浏览器,我们使用IE特有的滤镜效果来实现图片旋转。
HTML
我们在页面中放置一张图片,在图片的上方放置两个按钮,通过onclick事件调用rotate()函数来控制图片向左向右旋转。
<div id="tool">
<a href="#" id="arr_left" onclick="rotate('myimg','left')">向左</a>
<a href="#" id="arr_right" onclick="rotate('myimg','right')">向右</a>
</div>
<div id="img">
<img src="demo.jpg" width="460" height="305" alt="" id="myimg" />
</div>
Javascript
function rotate(obj,arr){
var img = document.getElementById(obj);
if(!img || !arr) return false;
var n = img.getAttribute('step');
if(n== null) n=0;
if(arr=='left'){
(n==0)? n=3:n--;
}else if(arr=='right'){
(n==3)? n=0:n++;
}
img.setAttribute('step',n);
...
}
我们写了个自定义函数rotate(),其中参数obj表示要旋转的图片对象的id,参数arr表示旋转方向,固定两个值:left(向左)和right(向右)。我们设置变量n是为了记录上下左右四种旋转状态,点击旋转按钮时可以保证持续的旋转的状态,即每次旋转是在上次旋转操作后的基础上再次旋转。
然后,我们要根据浏览器的不同进行不同的处理,对于IE系浏览器,可以使用他们特有的滤镜来实现旋转效果,虽然我们不建议使用滤镜,但为了兼容IE老版本,我们不得不重操这把旧刀。
function rotate(obj,arr){
...
//对IE浏览器使用滤镜旋转
if(document.all) {
img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
// 对现代浏览器写入HTML5的元素进行旋转: canvas
}else{
...
}
}
代码中,我们使用document.all判断是否为IE浏览器,如果是则使用滤镜,而对于firefox和chrome这样的现代浏览器,我们使用canvas来实现旋转效果。
function rotate(obj,arr){
...
// 对现代浏览器写入HTML5的元素进行旋转: canvas
}else{
var c = document.getElementById('canvas_'+obj);
if(c== null){
img.style.visibility = 'hidden';
img.style.position = 'absolute';
c = document.createElement('canvas');
c.setAttribute("id",'canvas_'+obj);
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;
};
}
}
代码中,我们创建canvas元素对象,并将图片赋予canvas对象,当变量n处于不同的状态(上下左右四个方向)时,使用canvas重新对图像进行绘制。
当然,图片的旋转效果实现还有一种解决方案,绕开html5,针对各不同的浏览器,比如firefox下面可以用-moz-transform: rotate(); webkit可以用-webkit-transform: rotate(); 但这并不如html5的canvas实现的效果好。
以上所述就是本文给大家分享的全部内容了,希望大家能够喜欢。
猜你喜欢
- 我在程序中加入了分数显示,三种特殊食物,将贪吃蛇的游戏逻辑写到了SnakeGame的类中,而不是在Snake类中。特殊食物:1.绿色:普通,
- User Centered Design 以用户为中心的设计,一说到这个很多人马上想到互联网和软件的设计,因为在IT、互联网行业提得最多。其
- 1) 知识准备:为了使用Perl语言去存取mSQL和MySQL数据库的内容,必须安装一些API模块,以下列出一些必须安装的模块名称说明和其下
- 相信认真做过网页设计(Web Design),或者关注过页面设计的同行都对“空格”不陌生。“空格”属于一类细节,很容易被忽略,但又比较影响效
- 问题当浏览SQL Server 2008的新特性时,我们看到了透明数据加密。这看起来很有趣。您能为我们解释一下并介绍下执行它的细节吗?专家解
- JavaScript中indexOf函数方法是返回 String 对象内第一次出现子字符串的字符位置。使用方法:strObj.indexOf
- object.OpenTextFile(filename[, iomode[, create[, format]]]) 参数 object
- 合理地扩大页面链接响应区域可以提高网页的易用性。同时还要兼顾到链接的交互一致性以及视觉上的平衡,就需要做一些特殊的处理。实例一:一张图配一个
- 在ie7发布之前,Dean的addEvent/removeEvent可以称的上是完美了。IE7发布后,引入新的内存泄漏(这个我不是很确定,忘
- 微软昨天在其2009年专业开发者大会上展示了下一个版本的Internet Explorer浏览器IE9。尽管只是一个早期版本,IE开发团队还
- PDO::execPDO::exec — 执行一条 SQL 语句,并返回受影响的行数(PHP 5 >= 5.1.0, PECL pdo
- 1.将以下代码加入到HEML的<body></body>之间<SCRIPT language=jav
- 一、什么是用户体验?用户体验的名词解释用户体验(User Experience,简称UE)是一种纯主观的在用户使用一个产品(服务)的过程中建
- 如何清除Vbscript惹出来的中文乱码? <script language=vbscript runat=s
- 如何最准确地统计在线用户数?我们推荐的这个程序据说是目前最好的在线用户数量统计程序。代码如下:'首先要设置好global.asa&n
- overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义
- 在修改后的 《闲谈 Web 图片服务器》 一文中也提及了"IE 浏览器的连接数问题",这也是个有趣的话题。值得补充记录一
- 数据库的选择原则是什么?我只知道小网站用Access,大网站用SQL,请问它的具体选择原则是什么?在实际应用中,数据库的选择原则一般是:如果
- 当然可以,我们使用强大的fso对象来获取文件夹的大小请敲入如下代码即可:<%Set MyFileSize =&nb
- 在js方法中添加"path= 过期时间"就可以解决这个问题。 例如://写cookies function setCoo