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. ECS 按量付费转包年包月支持按周啦

    功能场景 不需要别的理由,就是省钱. 以 华北1 ecs.t5-c1m2.xlarge ( 4vCPU 8GB ) 为例:按量付费一周需要 131元,而按周付费只需要 68元. 如果您正在使用按量付费 ...

  2. JS一些概念知识及参考链接

    1.setTimeout.setInterval.promise.宏任务.微任务 先执行宏任务整体 script 同步代码,然后遇到 setTimeout 或者 setInterval 即放到宏任务队 ...

  3. POJ 3259 Wormholes ( SPFA判断负环 && 思维 )

    题意 : 给出 N 个点,以及 M 条双向路,每一条路的权值代表你在这条路上到达终点需要那么时间,接下来给出 W 个虫洞,虫洞给出的形式为 A B C 代表能将你从 A 送到 B 点,并且回到 C 个 ...

  4. VBA在Excel中的应用（三）

    目录  Chart Export Chart Format Chart Lengend  Chart Protect  Chart Title  Chart Chart Export 1. 将Exce ...

  5. PHP获取时间排除周六、周日的两个方法

    //方法一: <?php $now = time(); //指定日期用法 $now = strtotime('2014-01-08') ; $day = 3600*24; $total = 12 ...

  6. Linux系统中imp导入dmp文件

    [oracle@ocm1 ~]$ lltotal 32-rw-r--r-- 1 oracle oinstall 24576 Mar 27 15:26 COUNTRIES.dmpdrwxr-xr-x 2 ...

  7. Spring Boot 的单元测试

    Spring Boot 的单元测试 引入依赖 testCompile group: 'org.springframework.boot', name: 'spring-boot-starter-tes ...

  8. vue分页练习

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. tp框架视图层view——模板继承

    在做网站的时候,每个网站都有头部和尾部,也就是菜单栏和页脚,网站的各个子网页的头部和尾部基本就是一样的,所以tp框架提供了一种模板继承的方法: 1.首先在View的Main文件夹下建立一个base.h ...

  10. Learn Python the hard way, ex39 列表的操作

    #!/usr/bin/python #coding:utf-8 ten_things = "apples oranges crows telephone light sugar" ...