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. Django2 + ORM

    创建模型类class UserInfo(models.Model): id = models.IntegerField() username = models.CharField(max_length ...

  2. centos 7 网卡绑定 bond0 开机无法自启

    https://blog.csdn.net/u012881151/article/details/54910847 1.环境CentOS Linux release 7.2.1511 (Core)li ...

  3. 项目部署到tomcat，浏览器能够访问，手机不能访问。

    问题:有这样一个问题,把项目部署到tomcat上,浏览器能够访问,但是手机不能访问. 解决:在 tomcat中找到conf文件夹,然后找到web.xml

  4. ruby file

    E:/AutoTHCN/lib/report/generate_report/web14/20190516/LoanTool.636936123857869205_190516_140514.xlsx ...

  5. SQL element_at函数

    库里有类似josn形式的字符串数据attr{"a":"123","b":"234"."c":&quo ...

  6. 电脑可以识别sd卡手机无法识别 的解决方法。 我成功了。 淘宝买的sd卡 不用退货了。 退的人肝疼

    https://wenku.baidu.com/view/822e471055270722192ef736.html 电脑可以识别 sd 卡手机无法识别 * (本教程只是本人实际操作方法,可以解决一部 ...

  7. Vagrant 入门 - 项目设置

    原文地址 配置 Vagrant 项目的第一步是创建 Vagrantfile 文件.Vagrantfile 文件的目的有两个: 设置项目的根目录.Vagrant 中的许多配置选项是相对于这个根目录的. ...

  8. Oracle系列：触发器、作业、序列、连接

    .Net程序员学用Oracle系列(8):触发器.作业.序列.连接   1.触发器 2.作业 2.1.作业调度功能和应用 2.2.通过 DBMS_JOB 来调度作业 3.序列 3.1.创建序列 3.2 ...

  9. spring容器的启动过程

    spring的启动过程: 首先,对于一个web应用,其部署在web容器中,web容器提供其一个全局的上下文环境,这个上下文就是ServletContext,其为后面的spring IoC容器提供宿主环 ...

  10. mybatis报错：org.apache.ibatis.builder.BuilderException：Encountered " "shr" "shr " " at line 1,column 1

    程序报错如下: 解决:变量名冲突 表字段‘审核人’简称为shr,与mybatis的OGNL表达式发生冲突. 解决方法:修改冲突的变量名即可. 总结了一下变量命名可能发生冲突的变量集合: bor(字符| ...