图片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 core 简单部署之FTP配置(CentOS 7.0安装配置Vsftp服务器)

    配置过程原文地址:http://www.osyunwei.com/archives/9006.html 坑和结果 正确的跟着这个内容走,是靠谱的. 我自己给自己踩了个坑,请参照文章的朋友注意第七条:七 ...

  2. LINQ to SQL语句(8)之Concat/Union/Intersect/Except

    适用场景:对两个集合的处理,例如追加.合并.取相同项.相交项等等. Concat(连接) 说明:连接不同的集合,不会自动过滤相同项:延迟. 1.简单形式: var q = ( from c in db ...

  3. jquery获取table的行数、列数

    $("#grd").find("tr").length; //行数 $("#grd").find("tr").find( ...

  4. 【无私分享：ASP.NET CORE 项目实战（第十三章）】Asp.net Core 使用MyCat分布式数据库，实现读写分离

    目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 MyCat2.0版本很快就发布了,关于MyCat的动态和一些问题,大家可以加一下MyCat的官方QQ群:106088787.我 ...

  5. JavaWeb_day02_登录校验_查询所有员工信息_DeBug

    本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! WEB_day02 servlet 协议转对象 服务器 ...

  6. javascript中的递归函数

    正常的递归函数如下: function factorial(num){ ){ ; }else{ ); } } 这个函数表面看起来还ok,但如果我们执行下面代码就会出错. var jenny = fac ...

  7. Oracle Blob数据保存为文件

    好久不写文,最近得空写一点.Oracle数据库国内用户量主要在企业上,其中有一种byte的存储称为Blob,并不能直接看. 有时候为了调试需要,可以通过: ,)) ; 这种sql去转为字符串查看,但是 ...

  8. JS中的对象

    什么事对象?对象是一个整体,对外提供一些操作.而面向对象,就是使用对象时,只关注对象提供的功能,不关注内部的细节,面向对象是一种通用思想. 面向对象编程的特点: 抽象:抓住核心问题: 封装:不考虑内部 ...

  9. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  10. 使用 Web API 模拟其他用户

    模拟的要求 模拟可代表另一个 Microsoft Dynamics CRM 用户,用于执行业务逻辑(代码)以便提供所需功能或服务,它使用模拟用户的相应角色和基于对象的安全性.这项技术很有必要,因为 M ...