<!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. 将Android Studio工程导入到Eclipse中

    1.前言 studio项目中src/main/java目录里面的代码对应的是eclispe项目中的src目录中的代码. 而studio中src目录里面包括整个项目的所有代码包括资源文件和xml. 2. ...

  2. 《OD学storm》20160827

    http://www.cnblogs.com/lujinhong2/p/4686512.html http://blog.csdn.net/paul_wei2008/article/details/2 ...

  3. 《OD大数据实战》mac下安装nginx+php

    一.mac安装nginx + php + php-fpm  或apache + php 1. Mac 下 Nginx.MySQL.PHP-FPM 的安装配置 2. Mac下安装LNMP(Nginx+P ...

  4. 【转载】关于XML文档的xmlns、xmlns:xsi和xsi:schemaLocation

    原文在: https://yq.aliyun.com/articles/40353 这里有转载:http://www.cnblogs.com/zhao1949/p/5652167.html 先来一段S ...

  5. Java里面instanceof怎么实现的

    开始完全一头雾水呀,后面看了Java指令集的介绍,逐渐理解了. https://www.zhihu.com/question/21574535/answer/18998914 下面这个答案比较直白 你 ...

  6. Android应用更新升级实现

    介绍 在产品的开发中,android升级提示,下载更新是必备的功能,否则等用户被动去官方网,或者第三方商店提示,就为时已晚了. 原理 在用户每次打开应用的时候,都与服务器进行一次交互,获取版本信息,对 ...

  7. HNOI2008题目总结

    呜呼..NOI前一个月正式开始切BZOJ了……以后的题解可能不会像之前的零散风格了,一套题我会集中起来发,遇到一些需要展开总结的东西我会另开文章详细介绍. 用了一天的时间把HNOI2008这套题切了… ...

  8. Scrum Agile

    Scrum Agile 迭代式增量软件开发,敏捷开发,源于丰田汽车的制造流程. HMC测试流程: 1.hmc改配置 2.上ui验证 3.还原hmm(有的需要,有的不需要) 4.addReferal,在 ...

  9. C# 类的访问修改符

    C#共有五种修饰符:public.private.protected.internal.protected internal. ◆public:公有,对所有类可见,不受任何限制 ◆protected: ...

  10. 每个极客都应该知道的Linux技巧

    每个极客都应该知道的Linux技巧 2014/03/07 | 分类: IT技术 | 0 条评论 | 标签: LINUX 分享到:18 本文由 伯乐在线 - 欣仔 翻译自 TuxRadar Linux. ...