图片90度翻转

在canvas中插入图片需先加载图片（利用Image对象）;加载完成后再执行操作drawImage(obj,x,y,w,h) 插入图片的坐标宽高等值

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="../css/public.css"/>

        <style type="text/css">

            body{background: black;}

            canvas{background: #fff;display: block;margin: 20px auto;}

            button{width: 100px;height: 40px;line-height: 40px;text-align: center;}

        </style>

        <script type="text/javascript">

            window.onload=function(){

                var oBtn=document.getElementsByTagName('button');

                var oImg=document.getElementById("img");

                var oDiv=document.getElementsByTagName('div')[0];

                var num=0;

                //在canvas中插入图片需要等图片加载完毕

                var aImg=new Image();

                aImg.src=oImg.src;

                aImg.onload=function(){

                    draw(oImg);

                }

                function draw(obj){

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

                    var oG=oC.getContext("2d");

                    oC.width=obj.width;

                    oC.height=obj.height;

                    oDiv.replaceChild(oC,oImg);

                    oG.drawImage(obj,0,0);

                    oBtn[0].onclick=function(){

                        num--;

                        if(num<0){

                            num=3;

                        }

                        toChange();

                    }

                    oBtn[1].onclick=function(){

                        num++;

                        toChange();

                    }

                    function toChange(){

                        switch(num%4){

                            case 0:

                                oC.width=obj.width;

                                oC.height=obj.height;

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

                                oG.drawImage(obj,0,0);

                                break;

                            case 1:

                                oC.width=obj.height;

                                oC.height=obj.width;

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

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

                                break;

                            case 2:

                                oC.width=obj.width;

                                oC.height=obj.height;

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

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

                                break;

                            case 3:

                                oC.width=obj.height;

                                oC.height=obj.width;

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

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

                                break;

                        }

                    }

                }

            }

        </script>

    </head>

    <body>

        <button id="right"><</button>

        <button id="left">></button>

        <div>

            <img src="../img/x.jpg" id="img"/>

        </div>

    </body>

</html>

canvas-图片翻转的更多相关文章

  1. html5 canvas图片翻转

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

  2. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...

  3. CSS3图片翻转切换案例及其中重要属性解析

    图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...

  4. 自己积累的一些Emgu CV代码（主要有图片格式转换，图片裁剪，图片翻转，图片旋转和图片平移等功能）

    using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...

  5. HTML5开发笔记：初窥CANVAS，上传canvas图片到服务器

    项目做到一个裁切图片的功能,就是让用户上传头像的时候可以裁切一下图片,选择一个合适大小位置来作为头像.之中用到了crop.js这个插件,用canvas直接绘制了用户裁切缩放后的图片.裁切的过程这边就不 ...

  6. gl.TexSubImage2D 使用遇到图片翻转的问题

    这2天在用gl.TexSubImage2D把几张小图转拼接成大图,如果在渲染物体之前拼接好就没有问题,但在开始渲染物体后拼接就会有问题.后来我做了2件事情来找原因, 1. 用拼好的图来画一个正方形,大 ...

  7. JavaScript修改Canvas图片

    用JavaScript修改Canvas图片的分辨率(DPI)   应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(D ...

  8. JavaScript图片翻转

    <script type="text/javascript"> /** * 注册函数f,当文档加载问成时执行这个函数f * 如果文件已经载入完成,尽快以异步方式执行它 ...

  9. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  10. CSS3图片翻转动画技术详解

    CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...

随机推荐

  1. SQL SERVER 竖表变成横表

    现有数据如下: Sql: select a.MODELID, max( case a.PNAME when'计划开始' then a.PVALUE end) as RStart, max( case ...

  2. MySQL设置服务器方法

    grant select,insert,update,delete on *.* to root@"%" Identified by "root";

  3. atitit.日期,星期,时候的显示方法ISO 8601标准

    atitit.日期,星期,时候的显示方法ISO 8601标准 1. ISO 86011 2. DAte日期的显示1 2.1. Normal1 2.2. 顺序日期表示法(可以将一年内的天数直接表示)1 ...

  4. SpringMVC+Spring+MyBatis+Maven调整【转】

    Idea SpringMVC+Spring+MyBatis+Maven整合   创建项目 File-New Project 选中左侧的Maven,选中右侧上方的Create from archetyp ...

  5. C++02.访问控制

    1.class是struct的扩展,它包括数据成员和成员函数. 2.在C++中,有三种访问权限: (1)private:默认,只供类内部的函数使用. (2)public:类外的程序可以使用. (3)p ...

  6. AlloyRenderingEngine文本框组件

    写在前面 Github: https://github.com/AlloyTeam/AlloyGameEngine 在dom元素里,自带了input标签,设置其type为text,它就是一个文本框. ...

  7. Android 7.0 Nougat牛轧糖 发布啦

    Android 7.0 Nougat牛轧糖 发布啦 Android 7.0 Nougat 牛轧糖于本月发布了. 从官方blog里可以了解到这个版本的新特性. Android 7.0 从2016年8月正 ...

  8. 【转】Android SDK Samples，学习Android的好方法

    转载地址:http://blog.csdn.net/rowland001/article/details/50886288 从今天开始呢,我要开始学习Google家自己出的Android代码示例,总觉 ...

  9. SpringMVC + mybatis + Druid insert 数据库中文乱码，查询无乱码

    之前一直在pom文件配置的数据库连接url,很多配置都写在pom文件中导致配置文件太长 新项目将配置写到不同的文件夹中得properties文件中了 db.url直接复制的pom文件中的 p.p1 { ...

  10. 如何用Github版本控制非Github库

    Git的图形化客户端有很多,不同的人可能习惯用不同的客户端.本人更习惯于Github的客户端,因为上Github比较多,同步代码到Github用官方的客户端是最方便的,所以也就更习惯于使用Github ...