test.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图片360度旋转</title>

    <style>

        input {

            font-size:18px;

            padding:5px 20px 5px 20px;

            font-weight:bold;

            color:white;

            background-color:#c5464a;

            cursor:pointer;

            border:none;

            outline:none;

            border-radius:7px 7px 7px 7px;

        }

    </style>

    <script  type="text/javascript"  src="test.js"></script>

</head>

<body>

<input type="button" value="←">

<input type="button" value="→">

<div id="mydiv">

    <img src="img3.jpg" id="img">

</div>

</body>

</html>

　　test.js

window.onload = function() {

    var inputval = document.getElementsByTagName('input');

    var imgval = document.getElementById('img');

    var yimg = new Image();

    var iNow = 0;

    yimg.onload = function() {

        draw(imgval);

    }

    yimg.src = imgval.src;

    function draw(obj) {

        var c = document.createElement('canvas');

        var cxt = c.getContext('2d');

        c.width = obj.width;

        c.height = obj.height;

        obj.parentNode.replaceChild(c, obj);

        cxt.drawImage(obj, 0, 0);

        inputval[1].onclick = function() {

            if (iNow == 3) {

                iNow = 0;

            } else {

                iNow++;

            }

            toChange();

        };

        inputval[0].onclick = function() {

            if (iNow == 0) {

                iNow = 3;

            } else {

                iNow--;

            }

            toChange();

        };

        function toChange() {

            switch (iNow) {

                case 0:

                    c.width = obj.width;

                    c.height = obj.height;

                    cxt.rotate(0 * Math.PI / 180);

                    cxt.drawImage(obj, 0, 0);

                    break;

                case 1:

                    c.width = obj.height;

                    c.height = obj.width;

                    cxt.rotate(90 * Math.PI / 180);

                    cxt.drawImage(obj, 0, -obj.height);

                    break;

                case 2:

                    c.width = obj.width;

                    c.height = obj.height;

                    cxt.rotate(180 * Math.PI / 180);

                    cxt.drawImage(obj, -obj.width, -obj.height);

                    break;

                case 3:

                    c.width = obj.height;

                    c.height = obj.width;

                    cxt.rotate(270 * Math.PI / 180);

                    cxt.drawImage(obj, -obj.width, 0);

                    break;

                case 4:

                    c.width = obj.width;

                    c.height = obj.height;

                    cxt.rotate(360 * Math.PI / 180);

                    cxt.drawImage(obj, obj.width, obj.height);

                    break;

            }

        }

    }

}

　　图片：

效果：

2017-09-08 23:03:47

html5 图片360旋转的更多相关文章

  1. CSS3动画旋转——（图片360°旋转）

    今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./y ...

  2. HTML5图片旋转

    HTML5图片旋转 首先我们使用Cococs2dx-Js-Lite版,来创建一个工程,我们所需要的开发环境如下: 1,webstrom 2,google chrome浏览器 3,cocos2dx-Js ...

  3. 分享10款效果惊艳的HTML5图片特效

    在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家. 1.HTML5 3D正方体旋转动画 很酷的3D特 ...

  4. 分享10款效果惊艳的HTML5图片特效【转】

    先插入一条广告,博主新开了一家淘宝店,经营自己纯手工做的发饰,新店开业,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店: ...

  5. 13 款最棒的 jQuery 图像 360° 旋转插件

    在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章.jQuery 图像旋转插件可以让用 ...

  6. 通过CSS3实现：鼠标悬停图片360度旋转效果

    效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...

  7. css3相册图片3D旋转展示特效

    查看效果:http://hovertree.com/texiao/css/14/ 本效果用css3的animation实现动画 定义和用法animation 属性是一个简写属性,用于设置六个动画属性: ...

  8. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. windows phone 摄像头得到图片是旋转90°

    我上个随笔讲到,windows phone 拍出来的photo如果直接使用是反转了90°的. 研究了很久..终于发现问题.其实..这是使用习惯问题... CameraCaptureUI 得到的phot ...

随机推荐

  1. C#[WinForm]实现自动更新

    C#[WinForm]实现自动更新 winform程序相对web程序而言,功能更强大,编程更方便,但软件更新却相当麻烦,要到客户端一台一台地升级,面对这个实际问题,在最近的一个小项目中,本人设计了一个 ...

  2. 学习日记12、list集合中根据某个字段进行去重复操作

    List<T_CusBankCardInfoModel> blist = B_BLL.GetListByCusId(CusIds).Distinct(new ModelComparer() ...

  3. TP5内部异常API数据输出的自定义方法编写

    需求:利用postman进行请求api接口过程中 关于一些数据输出异常的情况下 我们希望通过自己编写一些类和方法 实现便于后端人员进行根据提示进行调试处理! 以下测试的时候 请设置 app_debug ...

  4. wget下载简单语法

    文章参考:https://linuxtools-rst.readthedocs.io/zh_CN/latest/tool/wget.html nasa wget 下载: https://disc.gs ...

  5. 122、TensorFlow多设备运行

    # 如果你想使你的程序运行在不同的设备上 # tf.device函数提供了一个方便的方法来实现 # 所有在特定上下文中的操作都放置在相同的设备上面 # A device specification h ...

  6. day06—JavaScript之闭包

    转行学开发,代码100天——2018-03-22 第一次听说“闭包”这个词,还是在2015年某个深夜在听一节腾讯课堂的公开课上,当时老师讲什么已经没有清晰的记忆了,只知道是一次web的开发课程. 过了 ...

  7. 接口自动化之cookies登录

    现在有很多网站有验证码,跳过验证码实现登录可以使用cookies登录 目录 1.requests的添加cookies的方法 2.举个栗子 1.requests的添加cookies的方法 request ...

  8. gcc -o hello hello.c 执行过程

    GCC编译器驱动程序读取源程序文件hello.c,并将它翻译成一个可执行目标文件hello.这个翻译的过程可分为四个阶段. 1.预处理阶段 预处理器(cpp)根据以字符#开头的命令,修改原始的c程序. ...

  9. Spring 注解配置 WebApplicationContext

    https://docs.spring.io/spring-framework/docs/4.3.9.RELEASE/spring-framework-reference/htmlsingle/#be ...

  10. openstack介绍及共享组件——消息队列rabbitmq

    一.云计算的前世今生 所有的新事物都不是突然冒出来的,都有前世和今生.云计算也是IT技术不断发展的产物. 要理解云计算,需要对IT系统架构的发展过程有所认识. 请看下 IT系统架构的发展到目前为止大致 ...