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. linux运维、架构之路-MySQL主从复制

    一.MySQL主从复制原理图  MySQL主从复制原理:实现主从复制原理是三个线程完成的,主的I/O线程,备的I/O线程与SQL线程 1.首先主库db01需要开启binlog.授权一个replicat ...

  2. python之路----操作系统的发展史

    阅读目录 手工操作 —— 穿孔卡片 批处理 —— 磁带存储和批处理系统 多道程序系统 分时系统 实时系统 通用操作系统 操作系统的进一步发展 操作系统的作用 手工操作 —— 穿孔卡片 1946年第一台 ...

  3. window安装rsync客户端和服务端

    原文地址: https://www.cnblogs.com/janas/p/3321087.html 下载地址: https://linux.linuxidc.com/index.php?folder ...

  4. Java并发指南14：JUC中常用的Unsafe和Locksupport

    本文转自网络,侵删 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutoria ...

  5. 关于CSS你应该知道的基础知识 - 样式应用篇

    上一篇简单总结了一下选择器,如果一个元素被多个选择器选中,元素的样式就会以级联方式被应用到.要搞清最终那个样式被应用到元素上了,首先要明白引用CSS代码的几种方式. CSS代码引用方式 如何应用CSS ...

  6. Linux 用户和组信息

    linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号.在使用linux操作系统时候,通常我们会遇到对多用户进行管理.比如: 用户账号的添加. ...

  7. Android中国官网资源网站

    现在android开发者官网在中国有中文版已经不是太大的新闻,为了平时查询资料和学习方便,记录如下. PS:建议用Google浏览器浏览,你懂的!! https://developers.google ...

  8. Git/SVN相关

    svn配置不当: svn1.6之前的版本,通过访问.svn/.entries metasploit auxiliary/scanner/http/svn_scanner 在svn1.7之后的版本,通过 ...

  9. 正则表达式从入门到放弃「Java」

    正则表达式能做什么? 正则表达式可以用来搜索.编辑或处理文本. 「都懂它可以处理文本,可到底是怎么回事?」 正则表达式的定义 百度百科:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特 ...

  10. 高级软件工程第二次作业：随机生成N个不重复的已解答完毕的数独棋盘

    #include <stdio.h> #include "SuduCheck.h" ][],int i,int j,int k) //判断是否可以将第i行.第j列的数设 ...