图片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. form表单的字符串进行utf-8编码

    <form>表单有assept-charset属性.该属性规定字符的编码方式,默认是"unknown",与文档的字符集相同. 该属性除了Internet explore ...

  2. c#面向对象基础技能——学习笔记（二）基于OOP思想研究对象的【属性】

    字段(成员变量): 字段只能从对象中访问实例字段,无法直接从类中访问(换言之,不创建实例就不能访问),可以理解为:字段一般用在内部数据交互使用,当需要为外部提供数据时,(要优先使用自动实现的属性而不是 ...

  3. html

    有目标的学知识才行 要学习html语言,我突然发现我好像可以在markdown文本编辑器中编辑html标签,既然这样我就多玩玩.markdown完全兼容html,这真的是一个好事情.好像也有功能在ma ...

  4. 使用JQuery统计input和textarea文字输入数量代码

    本文主要介绍了jQuery实现统计输入文字个数的方法,需要的朋友可以参考下. HTML部分: <input type="text" value="我是输入的文字&q ...

  5. 【HTML5&CSS3进阶03】Jser与Csser如何一起愉快的翻新老组件

    上次,我们形成了两种header的布局,一种flexbox,一种float,最后与身边做重构的同事交流下来,选择了float的布局. 事实上布局的选型不需要我关注,我的参与或者一些意见多数是自我提升, ...

  6. javascript的defer和async的区别。

    我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...

  7. iOS开发中常用的设计模式

    常用的设计模式(一)代理模式应用场景:当一个类的某些功能需要由别的类来实现,但是又不确定具体会是哪个类实现.优势:解耦合敏捷原则:开放-封闭原则实例:tableview的 数据源delegate,通过 ...

  8. 用AVFoundation自定义相机拍照

    自定义拍照或者录视频的功能,就需要用到AVFoundation框架,目前我只用到了拍照,所以记录下自定义拍照用法,视频用法等用上了再补充,应该是大同小异 demo在这里:https://github. ...

  9. elasticsearch__5__java操作之FilterBuilders构建过滤器Query

    FilterBuilders构建过滤器Query 代码如下: package com.elasticsearch; import org.elasticsearch.action.ActionList ...

  10. UIView的layoutSubviews和drawRect方法何时调用

    首先两个方法都是异步执行.layoutSubviews方便数据计算,drawRect方便视图重绘. layoutSubviews在以下情况下会被调用: 1.init初始化不会触发layoutSubvi ...