<!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. 错误 -force-32bit 与 ANDROID_EMULATOR_FORCE_32BIT=true

    1,配置环境变量, 加上ANDROID_EMULATOR_FORCE_32BIT=true 2,在AS中启动模拟器用下面方法 在你要运行的个工程右击->Run as -> Run conf ...

  2. Python Mongo操作

    # -*- coding: utf-8 -*- ''' Python Mongo操作Demo Done: ''' from pymongo import MongoClient conn = None ...

  3. 《OD大数据实战》Flume环境搭建

    一.CentOS 6.4安装Nginx http://shiyanjun.cn/archives/72.html 二.安装Flume 1. 下载flume-ng-1.5.0-cdh5.3.6.tar. ...

  4. $.getJSON ashx 跨域

    context.Response.AddHeader("Access-Control-Allow-Origin", "*");

  5. jint

    nuget地址 https://www.nuget.org/packages/Jint/ github上源代码 https://github.com/sebastienros/jint

  6. [转] POJ字符串分类

    POJ 1002 - 487-3279(基础)http://acm.pku.edu.cn/JudgeOnline/problem?id=1002题意:略解法:二叉查找数,map,快排... POJ 1 ...

  7. Android程序架构基本内容概述

    在Android操作系统中开发的应用程序都有一个结构缜密的架构.我们今天就来对这一Android程序架构做一个详细的分析.帮助大家了解程序开发的特点,以方便将来在应用程序开中明确自己的程序架构. An ...

  8. 多层感知机及其BP算法（Multi-Layer Perception）

    Deep Learning 近年来在各个领域都取得了 state-of-the-art 的效果,对于原始未加工且单独不可解释的特征尤为有效,传统的方法依赖手工选取特征,而 Neural Network ...

  9. HDU 整除的尾数 2099

    解题思路:很简单的一道水题,这几天比较忙,没怎么刷题,找找自信,很快1A.   还可以,嘿嘿 #include<cstdio> #include<cstring> #inclu ...

  10. 【英语】Bingo口语笔记(71) - shit系列