<!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. appium安装

    appium 这个移动端的自动化测试框架.是神器啊.selenium系列的工具.webdirver是一个使用很广泛的自动化测试框架. 至于API 测试,等,使用代码做单元测试就好了,各种框架很多,只要 ...

  2. sqlserver取得本月一号

    select convert(datetime,convert(varchar(7),getdate(),120)+'-01',120) select convert(datetime,convert ...

  3. 网易新闻页面信息抓取 -- htmlagilitypack搭配scrapysharp

    最近在弄网页爬虫这方面的,上网看到关于htmlagilitypack搭配scrapysharp的文章,于是决定试一试~ 于是到https://www.nuget.org/packages/Scrapy ...

  4. UVa 10115 Automatic Editing

    字符串题目就先告一段落了,又是在看balabala不知道在说些什么的英语. 算法也很简单,用了几个库函数就搞定了.本来还担心题里说的replace-by为空的特殊情况需要特殊处理,后来发现按一般情况处 ...

  5. BZOJ 1078 斜堆

    感谢MATO大神的博客 http://www.cppblog.com/MatoNo1/archive/2013/03/03/192131.html 注意细节. #include<iostream ...

  6. ios中get,post和解压缩用法

    一. 网络概念 1. 在Linux系统上,运行的Web服务器的名字叫做Apache 2. 所有的http访问都是基于html或者相关的文件,例如:php,asp,jsp,asp.net 这些文件最终都 ...

  7. VS启用IIS调试的方法及可能碰到的问题。

    经常有这种情况, 开发机本地正常, 但是一旦发布到服务上后, 就出现各种问题. 这是由于开发机和服务器环境不一样造成的, 所以开发时要尽可能的模拟真实性.  这时候, VS的这个功能就帮大忙了. 如何 ...

  8. linux VFS 内核数据结构

    <strong>简单归纳:fd只是一个整数,在open时产生.起到一个索引的作用,进程通过PCB中的文件描述符表找到该fd所指向的文件指针filp.</strong> 文件描述 ...

  9. Be quiet

    Be quiet */--> UP | HOME Be quiet Table of Contents 1 Be quiet 1 Be quiet 最近心情有点不太好,各方面原因.主要是25岁是 ...

  10. 在centOS中加入本地ISO yum源

    注:本文转载自<liujun_live的博客>,感谢原博主的辛勤写作:原文地址:http://blog.sina.com.cn/s/blog_8ea8e9d50101em6f.html 在 ...