<!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. 推荐几本C#程序员阅读的书籍

    http://www.cnblogs.com/tongming/p/3879752.html

  2. 安卓开发24:FrameLayout布局

    FrameLayout布局 FrameLayout是五大布局中最简单的一个布局.FrameLayout布局中的元素会根据先后顺序重叠起来.利用FrameLayout布局元素重叠的特性,我们一般可以做一 ...

  3. JAVA 泛型练习

    二分查找: public class Q212 { public static void main(String [] args) { Integer []arr = {1,2,3,4,5,6,7,8 ...

  4. Java中遍历Map对象的方法

    方法一: 在for-each循环中使用entries来遍历 这是最常见的遍历方式,在需要获取key和value时使用. Map<Integer, Integer> map = new Ha ...

  5. Python初学

    经同学推荐,学习了下Python语言,看Python的介绍,它本身是一个面向对象的解释型脚本语言,我初看到这句话的时候就在想,一个脚本语言还搞成面向对象?有这个必要么?原谅我肤浅了一把. 它还被俗称为 ...

  6. BFC原理

    一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说 ...

  7. css渲染(二) 文本

    一.文本样式  首行缩进 text-indent 首行缩进是将段落的第一行缩进,这是常用的文本格式化效果.一般地,中文写作时开头空两格.[注意]该属性可以为负值:应用于: 块级元素(包括block和i ...

  8. Python 学习开篇

    前言 最近看到一张图,有点意思: 蓝色是(成长+付出),红色是回报.有多久可以达到这个红心,要看我们自已的努力,付出了多少专注与汗水.我想说的是,水平轴并不是时间,如果不能坚持努力,可能永远都到不了那 ...

  9. figure 的使用

    1.figure语法及操作(1)figure语法说明 figure(num=None, figsize=None, dpi=None, facecolor=None, edgecolor=None, ...

  10. ACM注意事项

           acm竞赛中不能使用一些屏幕控制和键盘读取的函数,如:getch(),geche(),gotoxy(),clrscr(),另外fflush(stdio)这个函数也不能使用,因为在有的编译 ...