<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

window.onload = function ()

{

    var oimg = document.getElementById('img1');

    var ainput = document.getElementsByTagName('input');

    var inum = 0;

    var yimg = new Image();

    yimg.onload = function ()

    {

        draw(oimg);

    }

    yimg.src = oimg.src;

    function draw(obj)

    {

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

        var ogc = oc.getContext('2d');

        oc.width = obj.width;

        oc.height = obj.height;

        obj.parentNode.replaceChild(oc,obj);

        ogc.drawImage(obj,0,0);

        ainput[1].onclick = function ()

        {

            if(inum == 3)

            {

                inum = 0;

            }

            else

            {

                inum ++;

            }

            tochange();

        }

        ainput[0].onclick = function ()

        {

            if(inum == 0)

            {

                inum = 3;

            }

            else

            {

                inum --;

            }

            tochange();

        }

        function tochange()

        {

            switch(inum)

            {

                case 1:

                    oc.width = obj.height;

                    oc.height = obj.width;

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

                    ogc.drawImage(obj,0,-obj.height)

                    break;

                case 2:

                    oc.width = obj.width;

                    oc.height = obj.height;

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

                    ogc.drawImage(obj,-obj.width,-obj.height)

                    break;

                case 3:

                    oc.width = obj.height;

                    oc.height = obj.width;

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

                    ogc.drawImage(obj,-obj.width,0)

                    break;

                case 0:

                    oc.width = obj.width;

                    oc.height = obj.height;

                    ogc.rotate(0);

                    ogc.drawImage(obj,0,0)

                    break;

            }

        }

    }

}

</script>

<style>

body{

    background:pink;

    }

#c1{

    background:white;

    }

</style>

</head>

<body>

<input type="button"  value="←"/>

<input type="button" value="→"/>

<div>

    <img id="img1" src="img/5-5.jpg">

</div>

</body>

</html>

html5 canvas防微博旋转的更多相关文章

  1. html5 canvas围绕中心点旋转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. HTML5 Canvas 小例子 旋转的图片

    <一>CSS部分 @charset "utf-8"; *{ padding:; margin:; outline: none; } #canvas{ position: ...

  3. HTML5 Canvas 小例子 旋转的时钟

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块

    基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块 前言 最近学习了 HT for Web flow 插件,除了正常的 flow 效果,其中还有两个十分好用的两个接口 getPercen ...

  5. Html5 Canvas动画旋转的小方块；

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. html5 canvas旋转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. HTML5 Canvas 绘制旋转45度佛教万字

    效果如下: 代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Cont ...

  8. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...

  9. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

随机推荐

  1. selenium支付高版本的FireFox

    http://blog.csdn.net/pw_windgod/article/details/6537409 15:22:12.031 WARN - GET /selenium-server/dri ...

  2. ListView(3)关于listview滚动事件，何时滚动到顶部或底部

    给listview设置一个OnScrollListener就可 ListView.OnScrollListener scrollListener = new ListView.OnScrollList ...

  3. android 分区layout以及虚拟内存布局-小结

    摘要 简述启动过程的内存分配,各个映像的烧写,加载,logo的刷新,文件系统mount. DRAM:外部RAM: ISRAM:内部RAM(128K),(PL会跑在ISRAM里面,去初始化DRAM,lo ...

  4. HDU 4691 Front compression（后缀数组）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4691 题意:给出Input,求出Compressed output.输出各用多少字节. 思路:求后缀数 ...

  5. 终于成功仿了一次Kalman滤波器

    终于成功仿了一次Kalman滤波器 首先是测试了从网上down的一段代码 % KALMANF - updates a system state vector estimate based upon a ...

  6. 51nod1201 整数划分

    01背包显然超时.然后就是一道神dp了.dp[i][j]表示j个数组成i的方案数.O(nsqrt(n)) #include<cstdio> #include<cstring> ...

  7. 51nod1189 阶乘分数

    (x-n!)(y-n!)=n!2 ans=t[n]+1.t表示的是n!2的小于n!的约数个数.n!2=p1a1*p2a2*p3a3...t[n]=(a1+1)*(a2+1)...-1 /2; 2对于n ...

  8. OK335xS ethtool 移植

    /******************************************************************* * OK335xS ethtool 移植 * 声明: * 由于 ...

  9. hihoCoder #1179 : 永恒游戏 (暴力枚举)

    题意: 给出一个有n个点的无向图,每个点上有石头数个,现在的游戏规则是,设置某个点A的度数为d,如果A点的石子数大于等于d,则可以从A点给每个邻接点发一个石子.如果游戏可以玩10万次以上,输出INF, ...

  10. Singleton模式写法

    public class Singleton { /** * 类级的内部类,也就是静态的成员式内部类,该内部类的实例与外部类的实例 * 没有绑定关系,而且只有被调用到才会装载,从而实现了延迟加载 */ ...