51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
JS代码
当前位置:首页>实用代码>JS代码>

Javascript与HTML5的canvas实现图片旋转效果

时间:2017-07-05 11:21点击:

我们在微博上可以对图片进行向左转向右转等旋转操作,让用户可以从不同的视角欣赏图片效果。本文将结合实例为您讲解如何使用Javascript结合相关技术来实现图片的旋转效果。我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie6,7,8不支持HTML5的浏览器,我们使用IE特有的滤镜效果来实现...





我们在页面中放置一张图片,在图片的上方放置两个按钮,通过onclick事件调用rotate()函数来控制图片向左向右旋转。

HTML部分:


<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实现的效果好。

51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开