利用canvas来方便的对图片进行任意角度的旋转

以前写过类似旋转图片的js代码,也算是实现了效果。但是代码很粗糙,效果也不是很理想,现在有了canvas,碰巧找到这个这段插件代码,修改一下就可以拿来用了,实在是方便!

1、首先引入相关的js文件

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.rotate.js"></script>

2、创建相关html元素

<img src="avatar.png" id="image"/>
<button id="rotate">旋转</button>

3、添加操作的js代码

<script type="text/javascript">
    $(function() {
        $('#rotate').on('click', function() {
            $('#image').rotate();
        });
    });
</script>

完成以上三个步骤以后,点击按钮图片会按着顺时针方向以90˚循环进行旋转。


最后附加上其他一些使用的方式

<script type="text/javascript">
    $(function() {
        $('#image_left').rotate();              //顺时针以90˚进行旋转
        $('#image_left').rotate(false);         //逆时针以90˚进行旋转
        $('#image_left').rotate('left');        //向左旋转90˚
        $('#image_right').rotate('right');      //向右选中90˚
        $('#image_bottom').rotate('bottom');    //顺时针上下翻转
        $('#image_angle').rotate(120);          //顺时针旋转120˚,负数是逆时针
    });
</script>

下载地址     在线演示

友荐云推荐