canvas图片左右旋转效果

收藏

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

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

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 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, 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，您有兴趣可以去网上搜一搜，其他的就不多说了，总之，希望对您的学习有所帮助。