keleyi.htm的代码如下：

 <!DOCTYPE HTML>

 <html>

 <head>

 <title>html旋转画布-柯乐义</title>

 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>

 <script type="text/javascript" src="keleyi.js"></script>

 </head>

 <body>

 <canvas id="keleyi"></canvas>

 </body>

 </html>

keleyi.js的代码如下：

 /*

 * 功能：画布旋转

 * http://keleyi.com

 * 柯乐义 copyright

 */

 (function(){

     var canvas=null,

     context=null,

     angle=0;

     function resetCanvas(){

         canvas=document.getElementById("ke"+"leyi");

         canvas.width=window.innerWidth;

         canvas.height=window.innerHeight;

         context=canvas.getContext("2d");

     }

     function animate(){

         context.save();

         try{

             //清除画布

             context.clearRect(0, 0, canvas.width, canvas.height);

             //设置原点

             context.translate(canvas.width * 0.5, canvas.height * 0.5);

             //旋转角度

             context.rotate(angle);

             //设置填充颜色

             context.fillStyle = "#FF0000";

             //绘制矩形

             context.fillRect(-30, -30, 60, 60);

             angle += 0.05 * Math.PI;

         }

         finally{

             context.restore();

         }

     }

     $(window).bind("resize",resetCanvas).bind("reorient",resetCanvas);

     $(document).ready(function(){

         window.scrollTo(0,1);

         resetCanvas();

         setInterval(animate,40);

     });

 })();

http://www.cnblogs.com/sosoft/

html5画布的旋转效果的更多相关文章

  1. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  2. HTML5画布生成的3D飞船舰队效果

    在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果

  3. 使用HTML5画布（canvas）生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

  4. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  5. html5画布基础

    canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...

  6. HTML5画布实现方法：

    我们可以在HTML中使用属性width和height来定义Canvas.但是实现Canvas的相关功能主要还依赖于Javascript实现,即HTML5 Canvas API.我们使用javascri ...

  7. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  8. HTML5画布Canvas

    一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...

  9. html5 画布上的rotate使用

    作为刚进公司的毕业生,第一个项目便是开发html5游戏,于是网上搜寻各种有关html5的资料,把w3School中有关html5的教程通通过了一遍,发现里面的教程非常适合刚接触html5的人,作为菜鸟 ...

随机推荐

  1. Nim语言的模块化编程

    前言 Nim支持把一大段程序分成若干个模块 一个模块就是一个源代码文件 每个模块都拥有它自己的名称空间 模块化可以起到封装(信息隐藏)和分步编译的作用 一个模块可以通过import语句获得另一个模块的 ...

  2. 程序员必须知道的几个Git代码托管平台

    上一篇博客中2015继续任性——不会Git命令,照样玩转Git我们简单的介绍了在VS2013中使用Git,和GitHub客户端的使用.那么使用Git到底有什么好处呢?最为明显的是支持Git代码托管的平 ...

  3. jmap

    环境: 现有一个独立运行的系统S(有独立的jre,但是没jdk),现想通过jmap导出其内存堆栈信息.于是另外安装一个jdk.可是jdk的版本跟S系统的jre不能对应上.出了很多错误. 总是报错: C ...

  4. LINQ to Entities不识别方法***，因此该方法无法转换为存储表达式

    我的程序里有这么一段代码: order.OrderExpressInfo = (from oei in orderExpressRepository.Entities where oei.OrderI ...

  5. Java六大问题你都懂了吗？

    这些问题对于认真学习java的人都要必知的,当然如果你只是初学者就没必要那么严格了,那如果你认为自己已经超越初学者了,却不很懂这些问题,请将你自己重归初学者行列. 一.到底要怎么样初始化! 本问题讨论 ...

  6. java的五种数据类型解析

    不知道大家对java的简单数据类型是否了解,下面针对Java的五种类型简单数据类型表示数字和字符,进行详细的讲解和分析. 一.简单数据类型初始化 在Java语言中,简单数据类型作为类的成员变量声明时自 ...

  7. golang开发缓存组件

    代码地址github:cache 花了一天时间看了下实验楼的cache组件,使用golang编写的,收获还是蛮多的,缓存组件的设计其实挺简单的,主要思路或者设计点如下: 全局struct对象:用来做缓 ...

  8. SQL SERVER 2005/2008 中关于架构的理解(二)

    本文上接SQL SERVER 2005/2008 中关于架构的理解(一)      架构的作用与示例 用户与架构(schema)分开,让数据库内各对象不再绑在某个用户账号上,可以解决SQL SERVE ...

  9. Java学习第一天

    Java学习第一天 对于网络管理员或者黑客必须知道的八个cmd命令 详情请参考:http://www.2cto.com/os/201608/533964.html          nbtstat  ...

  10. C# 进制转换 （没有数值的长度限制）

    曾经在大学时做过一个c的进制转换算法,那时由于技术的局限性,数值的大小受到限制(系统数据类型长度限制),多年以后,自己那台学习机陈旧后感觉要报废了,整理了一下里面的东西,偶尔在一个角落里发现了这个转换 ...