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. 赴美工作常识（Part 5 - 绿卡优先级）

    这个系列的第一篇<赴美工作常识(Part 1 - 签证)>是三年前写的,过了这么久这个系列终于要继续下去了.接下来当然时讨论绿卡的事情了.跟讨论签证一样,这里必须要有免责声名.因为我不是移 ...

  2. [自己动手玩黑科技] 1、小黑科技——如何将普通的家电改造成可以与手机App联动的“智能硬件”

    NOW, 步 将此黑科技传授予你~ 一.普通家电控制电路板分析 普通家电,其人机接口一般由按键和指示灯组成(高端的会稍微复杂,这里不考虑) 这样交互过程,其实就是:由当前指示灯信息,按照操作流程按相应 ...

  3. 使用MYSQL命令直接导入导出SQL文件

    很多时候,我们的数据开发都会用到很多开发利器,比如powerdesigner, navicat等这些软件,虽然好用,但是要收费,在公司里面是禁止使用盗版软件的,怕罚款各方面的,所以我们也不敢直接在公司 ...

  4. ThinkPHP框架里隐藏index.php

    本文所写的配置在ThinkPHP3.2.2上测试过.按理也兼容其它版本. 首先修改配置文件: 'URL_CASE_INSENSITIVE' => true, // 默认false 表示URL区分 ...

  5. iOS----Xcode6或者Xcode7设置LaunchImage图标

    最近设置LaunchImage图标时发现怎么都没有效果,后来发现是Xcode6中新建项目的时候会默认添加一个LaunchScreen.xib的文件,我们启动程序的时候也会发现,加载的时LaunchSc ...

  6. cordova编译报错：Execution failed for task ':processDebugResources'

    cordova编译报错:Execution failed for task ':processDebugResources' 引发这个错误的最扩祸首就是一个中文命名的文件,不知道什么时候加入的,我写了 ...

  7. 通过bootstrap来学习less

    很早之前就听说过less了,但是一直拖着没去学习.最近抽空看了less,其实语法很简单,看一遍基本就知道怎么用了.平时自己写页面用less的话,感觉是方便了些,但是难道less的好处就只是这样? 刚好 ...

  8. Sql Server系列：索引维护

    1. DBCC SHOWCONTIG 显示指定表的数据和索引的碎片信息.当对表进行大量的修改或添加数据后,执行此语句可以查看有无碎片,显示指定的表或试图的数据和索引的碎片信息. 其语法格式: DBCC ...

  9. ab压力测试

    原文链接:http://www.orlion.ga/698/ ab是个什么就不说了搞lamp的都会知道.主要看一下结果都是什么意义. ab 的用法是:ab [options] [http://]hos ...

  10. JUnit4使用

    1.导入Junit4jar包: Eclipse中在项目上右键点击Bulid Path,然后再点击Add libraries,选择JUnit 2.初次使用 首先先创建一个java项目如下: Demo.j ...