图片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. ASP.NET MVC项目演练:用户登录

    ASP.NET MVC 基础入门 http://www.cnblogs.com/liunlls/p/aspnetmvc_gettingstarted.html 设置默认启动页面 public clas ...

  2. 珍珠（bead）

    题目描述 有n颗形状和大小都一致的珍珠,它们的重量都不相同.n为整数,所有的珍珠从1到n编号.你的任务是发现哪颗珍珠的重量刚好处于正中间,即在所有珍珠的重量中,该珍珠的重量列(n+1)/2位.下面给出 ...

  3. [连载]《C#通讯（串口和网络）框架的设计与实现》- 9.插件引擎设计

    目       录 第九章           插件引擎设计... 2 9.1           框架的契约-接口... 2 9.2           插件的雏形-抽象类... 3 9.3     ...

  4. JAVA调用R

    JAVA很适合开发应用系统,但是数学建模和计算能力非其所长,如果该系统需要进行大量的统计或者优化的计算,调用R是一种很好的方式.JAVA负责系统的构建,R用来做运算引擎,从而实现应用型和分析性相结合的 ...

  5. sea.js详解

    Seajs相关知识 seajs.Use 引入入口文件 第一个参数表示模块id 字符串表示一个模块id 数组,数组每个成员表示一个模块 第二个参数表示回调函数(可有可无的) 作用就是当模块加载完成执行回 ...

  6. angular $http请求

    angular使用post.get向后台传参的问题 一.问题的来源 我们都知道向后台传参可以使用get.put,其形式就类似于name=jyy&id=001.但是在ng中我却发现使用$http ...

  7. Jquery更改table中的内容（一）

    css部分: .tab{ border:solid 1px #00aaee; text-align: left; margin:20px;}.tab tr{ border-top: solid 1px ...

  8. Golang Web开发时前端出现谜之空白换行的坑

    在使用Golang做Web开发时,有时候渲染出来的模板在前台显示时会出现一些奇怪的空白换行,具体特征就是查看css样式表并没有相关定义的空白部分. 分析: 查看出现问题页面的网页源代码,复制空白换行部 ...

  9. iOS开发中的数学函数

    在iOS开发当中...我们往往会涉及到一些算法...为了节省一些时间...让APP很快地被开发出来...我们需要对各类函数有一定的了解...接下来...我把部分常用函数分享出来...希望能帮到大家.. ...

  10. RadioButton与CheckBox

    笔者长期从事于数据库的开发,算了,不提当年了,因为一直用的是小语种(PowerBuilder),还是来说说这两个最常见的控件吧! RadioButton(单选)和CheckBox(多选) 先来看看继承 ...