图片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. C# 当前系统的多管理账户测判断

    using (DirectoryEntry comp = new DirectoryEntry("WinNT://" + Environment.MachineName + &qu ...

  2. MySQL存储过程（转）

    一.MySQL 创建存储过程 "pr_add" 是个简单的 MySQL 存储过程,这个存储过程有两个 int 类型的输入参数 "a"."b" ...

  3. 新手入门JUnit单元测试

    首先将JUnit插件安装到Eclipse或myeclipse里面,编写完一个模块或者实体类的时候,直接右击,new一个JUnit项目,选择你想测试的实体类(模块),然后会自动生成一个类,这个类,我们将 ...

  4. 2016年最新mac下vscode配置golang开发环境支持debug

    网上目前还找不到完整的mac下golang环境配置支持,本人配置成功,现在整理分享出来. mac最好装下xcode,好像有依赖关系安装Homebrew打开终端窗口, 粘贴脚本执行/usr/bin/ru ...

  5. 开源物联网框架ServerSuperIO（SSIO），项目中实践应用介绍

    一.项目背景 我们是传统行业,但是我们有一颗不传统的心.企业用户遍布国内和国外,面对行业,要建设行业级的(大)数据平台.一提到大数据平台,大家往往想到Hadoop.Spark.Nosql.分布式等等, ...

  6. div 加载 html页面的方法

    做网页的单页面应用时,需要在一个HTML的Div元素中加载另一个HTML页面,以前有一种方法就是用iframe,举例如下: <div class="main-container&quo ...

  7. 【IOS开发笔记03-视图相关】简单计算器的实现

    UIView 经过前几天的快速学习,我们初步了解的IOS开发的一些知识,中间因为拉的太急,忽略了很多基础知识点,这些知识点单独拿出来学习太过枯燥,我们在今后的项目中再逐步补齐,今天我们来学习APP视图 ...

  8. iOS - ViewController的生命周期

    iOS SDK中提供很多原生的ViewController,大大提高了我们的开发效率:那么下面我们就根据开发中我们常用的ViewController谈一谈它的生命周期: (一)按照结构和用法可以对iO ...

  9. 从无到有实现登录功能以及thinkphp怎么配置数据库信息

    好开心,终于解决了.从学习android到现在写登录功能已经不是一次两次了,如今再写想着肯定是信手拈来,没有想到的是尽然折磨了我一天的时间才搞定它.唉...... 先来看几张截图,这次的登录跟以往的不 ...

  10. Looper.prepare()和Looper.loop()

    什么时候需要 Looper Looper用于封装了android线程中的消息循环,默认情况下一个线程是不存在消息循环(message loop)的,需要调用Looper.prepare()来给线程创建 ...