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. [.net 面向对象编程基础] (23) 结束语

    [.net 面向对象编程基础] (23)  结束语 这个系列的文章终于写完了,用了半个多月的时间,没有令我的粉丝们失望.我的感觉就是一个字累,两个字好累,三个字非常累.小伙伴们看我每篇博客的时间就知道 ...

  2. zendframework 2 链接数据库

    相对于zf1,来说,zf2让我们对于数据库这方面的操作我的个人感觉是对于字段起别名简单了,但是对数据库的操作虽然配置写好的就基本不需要动了,但是还是比1的配置要繁琐, 还是那句话,大家可以去看看源码. ...

  3. 在.net中使用aquiles访问Cassandra(三)

    之前我们实现了如何修改数据,还需要相应的删除动作.删除方式会有几种情况,以下分别一一介绍.   1.批量删除,适应于多行多列的情况. public void Remove(string columnF ...

  4. [ZigBee] 15、Zigbee协议栈应用（一）——Zigbee协议栈介绍及简单例子（长文，OSAL及Zigbee入门知识）

    1.Zigbee协议栈简介 协议是一系列的通信标准,通信双方需要按照这一标准进行正常的数据发射和接收.协议栈是协议的具体实现形式,通俗讲协议栈就是协议和用户之间的一个接口,开发人员通过使用协议栈来使用 ...

  5. js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  6. InputStream与InputStreamReader的区别

    InputStream是字节流,多用于读取二进制数据 InputStreamReader是字符流,多用于读取文本文件.有不同的编码方式,如utf8等.可以在构造的时候指定编码方式. 例如,两者都有一个 ...

  7. C++ 引用

    本文主要记录了C++中的引用特性,总结了一下代码示例和错误. 简单的引用 引用是C++的特性,指针是C语言的特性.上面代码结果如下: 20 20 100 20 true 引用和被引用的对象是占用同一个 ...

  8. Java程序员的日常 —— Java类加载中的顺序

    之前说过Java中类的加载顺序,这次看完继承部分,就结合继承再来说说类的加载顺序. 继承的加载顺序 由于static块会在首次加载类的时候执行,因此下面的例子就是用static块来测试类的加载顺序. ...

  9. Atitit 数据处理查询 中的异常标准化草案 jpa jdbc hb  oql规范attilax总结

    Atitit 数据处理查询 中的异常标准化草案 jpa jdbc hb  oql规范attilax总结 Javaee6 与net 异常规范1 Jpa规范 JPA全称Java Persistence A ...

  10. Ajax技术使用

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...