最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

canvas图片左右旋转效果

来源:http://www.erdangjiade.com/ 沐浴春风 2014-12-11 00:18浏览(1697)

我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie8版本以下不支持HTML5的浏览器,可使用IE特有的滤镜效果来实现...

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

canvas图片左右旋转效果
分类:图片代码 > 图片插件 难易:初级
查看演示 下载资源 下载积分: 30 积分

HTML

首先放一张图片,在图片的上方有两个左右旋转按钮,我们通过rotate()函数来控制图片左右旋转。

<div id="buttons">  
   <a href="javascript:void(0);" id="btn_left" onclick="rotate('image', 'left')">向左转</a>  
   <a href="javascript:void(0);" id="btn_right" onclick="rotate('image', 'right')">向右转</a>  
  </div>  
  <div id="img_area">  
   <img src="images/canvas.png" alt="旋转图片" id="image" />  
</div>

Javascript

rotate()有两个参数,第一个obj表示被旋转图片的id,第二个参数arr表示旋转方向,固定两个值:left(向左)和right(向右)。

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); 
}

对于IE8以下版本,可以使用他们特有的滤镜来实现旋转效果。

if (document.all) { //判断是否是IE浏览器 ,返回true 说明是IE 
    img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + n + ')'
    //HACK FOR MSIE 8 
    switch (n) { 
    case 0
        img.parentNode.style.height = img.height; 
        break
    case 1
        img.parentNode.style.height = img.width; 
        break
    case 2
        img.parentNode.style.height = img.height; 
        break
    case 3
        img.parentNode.style.height = img.width; 
        break
    } 
}

除了IE8以下版本,我们使用HTML5的canvas进行旋转,代码如下:

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, 00); 
    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
}

对于图片旋转的jQuery插件还有更强大的,例如:jQueryRotate.js,您有兴趣可以去网上搜一搜,其他的就不多说了,总之,希望对您的学习有所帮助。

声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/27.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2