javascript结合canvas实现图片旋转效果


Posted in Javascript onMay 03, 2015

我们在微博上可以对图片进行向左转向右转等旋转操作,让用户可以从不同的视角欣赏图片效果。本文将结合实例为您讲解如何使用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实现的效果好。

以上所述就是本文给大家分享的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
web基于浏览器的本地存储方法应用
Nov 27 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
浅谈javascript语法和定时函数
May 03 #Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 #Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 #Javascript
jQuery中 attr() 方法使用小结
May 03 #Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 #Javascript
jQuery的几个我们必须了解的特点
May 03 #Javascript
jQuery的css() 方法使用指南
May 03 #Javascript
You might like
PHP新手上路(十四)
2006/10/09 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
php搜索文件程序分享
2015/10/30 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
python访问sqlserver示例
2014/02/10 Python
Python中处理时间的几种方法小结
2015/04/09 Python
python定时关机小脚本
2018/06/20 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
彪马英国官网:PUMA英国
2019/02/11 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
幼儿园长自我鉴定
2013/10/17 职场文书
会计专业毕业生自荐信范文
2013/12/20 职场文书
经销商订货会主持词
2014/03/27 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
父亲节活动总结
2015/02/12 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书