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. Programming Erlang 学习笔记(一)

    入门 启动Shell 在cmd中输入命令”erl”,百分号(%)表示一个注释的开始,从百分号开始到这行结束的所有文本都被看做是注释. 一个完整的命令需要以一个句点和一个回车结束. 退出erlang的命 ...

  2. [异常解决] MPU6050启动异常读出陀螺仪和加速度计的值全为0的解决办法

    在调试一个自己做的手环,每次用keil烧写好程序运行的蓝牙.陀螺仪都是正常的.但是掉电再上电之后蓝牙是好的.陀螺仪可以读出ID但是读出的加速度和角速度数据全为0. 下面是发生问题时main函数的前面部 ...

  3. 5、CC2541芯片中级教程-OSAL操作系统（PWM+看门狗）

    本文根据一周CC2541笔记汇总得来—— 适合概览和知识快速索引—— 全部链接: 中级教程-OSAL操作系统\OSAL操作系统-实验01 OSAL初探 [插入]SourceInsight-工程建立方法 ...

  4. git rm–r folder fatal:pathspec "" did not match any files

    问题描述: 某年某月某日,在查看git库的时候,发现文件的分布和文件夹的名字是极其不合理的,所以移动和重命名了某些文件. 在删除(git rm –r folder)一个空文件夹的时候,出现错误:fat ...

  5. C#入门基础三四

    数组:数组是一组具有相同类型的值的集合,可以通过索引来访问数组中的元素. 声明数组的语法: A.数据类型 [] 数组名称: B.数据类型 [] 数组名称 = new 数据类型[数组大小]; C.int ...

  6. Atitit atiuse软件系列

    Atitit atiuse软件系列 1.1.  Atian inputmethod 输入法 方言与多语言多文字支持 (au)1 1.2. File searcher 文件搜索器,支持压缩文件与正则表达 ...

  7. 批处理集锦——(5)使用dir查找文件

    eg dir /a-d /s /b *.bat -d表示不显示.bat结尾的文件夹

  8. Java基础-继承-编写一个Java应用程序，设计一个汽车类Vehicle，包含的属性有车轮个数 wheels和车重weight。小车类Car是Vehicle的子类，其中包含的属性有载人数 loader。卡车类Truck是Car类的子类，其中包含的属性有载重量payload。每个 类都有构造方法和输出相关数据的方法。最后，写一个测试类来测试这些类的功 能。

    #29．编写一个Java应用程序,设计一个汽车类Vehicle,包含的属性有车轮个数 wheels和车重weight.小车类Car是Vehicle的子类,其中包含的属性有载人数 loader.卡车类T ...

  9. 那些年我们写过的T-SQL（下篇）

    下篇的内容很多都会在工作中用到,尤其是可编程对象,那些年我们写过的存储过程,有木有?到目前为止很多大型传统企业仍然很依赖存储过程.这部分主要难理解的部分是事务和锁机制这块,本文会进行简单的阐述.虽然很 ...

  10. DOM操作表格

    前面的话 表格table元素是HTML中最复杂的结构之一.要想创建表格,一般都必须涉及表示表格行.单元格.表头等方面的标签.由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量 ...