<!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. windows服务删除后，在次安装时无法安装启动。

    当我在windows的cmd下卸载evtsys evtsys -u  再次安装时evtsys.exe -i -h 192.168.32.12 -p 514 提示“指定的服务已标记为删除”,进入服务管理 ...

  2. python3代码

    import urllib.request url="http://mm.taobao.com/json/request_top_list.htm?type=0&page=1&quo ...

  3. C# Winform 获取天气情况

    WebServices(http://www.webxml.com.cn/WebServices/WeatherWebService.asmx)来实现天气预报,该天气预报 Web 服务,数据来源于中国 ...

  4. linux CPU loading calculate

    http://hi.baidu.com/lionpanther/item/e908c37abdaf1c3f71442380 #include <stdio.h>#include <s ...

  5. hihoCoder #1181: 欧拉路·二 （输出路径）

    题意: 给定一个图,要求打印出任一条欧拉路径(保证图肯定有欧拉路). 思路: 深搜的过程中删除遍历过的边,并在回溯时打印出来.在深搜时会形成多个环路,每个环都有一个或多个结点与其他环相扣,这样就可以产 ...

  6. 二：ZooKeeper术语概念

    一:Zookeeper的设计目标   -->Zookeeper致力于提供一个高性能,高可用,且具有严格的顺序访问控制能力(主要是写操作的严格顺行性)的分布式协调服务. -->高性能使得Zo ...

  7. 【转】iOS开发UI篇—iPad和iPhone开发的比较

    原文网址:http://www.cnblogs.com/wendingding/p/3918007.html iOS开发UI篇—iPad和iPhone开发的比较 一.iPad简介 1.什么是iPad ...

  8. Symfony2学习笔记之表单

    对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最 ...

  9. Android服务之Service

    android中服务是运行在后台的东西,级别与activity差不多.既然说service是运行在后台的服务,那么它就是不可见的,没有界面的东西.你可以启动一个服务Service来播放音乐,或者记录你 ...

  10. Visual Assist的破解与安装

    转载[PYG成员作品] [2016-09-26更新]Visual Assist X10.9.2112-Cracked.By.PiaoYun/P.Y.G 近期的一个稳定版本的破解方式: VA原版, VA ...