canvas图片左右旋转效果

来源:https://www.sucaihuo.com/js/27.html 2015-04-05 18:04浏览(6437) 收藏

我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie8版本以下不支持HTML5的浏览器,可使用IE特有的滤镜效果来实现...
canvas图片左右旋转效果
分类:图片代码 > 图片插件 难易:初级
查看演示 下载资源 下载积分: 20 积分

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

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

评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2