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. 5G即将到来！我们需要一部怎样的手机呢？

    随着5G技术研发试验即将于年底宣告完成,也就意味着2019年起,5G商用将会宣布启动,现在OPPO.vivo.小米.华为.一加等众多手机厂商也宣布启动5G计划,这时5G势必会掀起一股新鲜的血液,5G手 ...

  2. Axios 安卓4.4不兼容的问题

    问题:Vue在使用Axios做接口请求时,如果是安卓4.4系统会发生报错,原因是安卓4.4不支持ES6的Promise语法 解决方案: 1.安装: npm install babel-polyfill ...

  3. vue项目适应不同屏幕做的适配器

    一般宽度是1920的,但是有的电脑屏幕很窄,导致页面样式错乱,那么可以设置app.vue以及主页面里的样式宽度为1920px,超过了就auto. 如下: (app.vue) (home.vue) 原效 ...

  4. Solr添加文档（XML)

    在上一章中,我们学习解释了如何向Solr中添加JSON和.CSV文件格式的数据.在本章中,将演示如何使用XML文档格式在Apache Solr索引中添加数据. 示例数据 假设我们需要使用XML文件格式 ...

  5. css浮动现象及清除浮动的方法

    css浮动现象及清除浮动的方法   首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕   再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...

  6. 洛谷P1378 油滴扩展（搜索）

    洛谷P1378 油滴扩展 直接暴力搜索更新答案就可以了. 时间复杂度为 \(O(n!)\) . #include<stdio.h> #include<stdlib.h> #in ...

  7. php Closure类 闭包 匿名函数

    php匿名函数 匿名函数就是没有名称的函数.匿名函数可以赋值给变量,还能像其他任何PHP对象那样传递.不过匿名函数仍是函数,因此可以调用,还可以传入参数.匿名函数特别适合作为函数或方法的回调. 如: ...

  8. 1208E Let Them Slide

    题目大意 给你n个序列,每个一行 每个序列是可以左右移动的 对于每一列问在随意左右移动这些序列的情况下 这一列的每个数的和最大是多少 分析 对于每个序列分为两种情况 [1]长度小于长度的一半 我们发现 ...

  9. delphi idhttpsever

    http://blog.csdn.net/chelen_jak/article/details/50203809 delphi idhttpsever 2015-12-07 11:36 216人阅读  ...

  10. 字符串模式匹配算法系列（二）：KMP算法

    算法背景: KMP算法是由Donald Knuth和Vaughan Pratt于1970年共同提出的,而James H.Morris也几乎同时间独立提出了这个算法.因此人们将其称作“克努特-莫里斯-普 ...