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轻量级MVC框架：Nancy入门教程(一)——初识Nancy

    当我们要接到一个新的项目的时候,我们第一时间想到的是用微软的MVC框架,但是你是否想过微软的MVC是不是有点笨重?我们这个项目用MVC是不是有点大材小用?有没有可以替代MVC的东西呢?看到这里也许你会 ...

  2. [硬件项目] 2、汽车倒车雷达设计——基于专用倒车雷达芯片GM3101的设计方案与采用CX20106A红外线检测芯片方案对比

    前言 尽管每辆汽车都有后视镜,但不可避免地都存在一个后视镜的盲区,倒车雷达则可一定程度帮助驾驶员扫除视野死角和视线模糊的缺陷,提高驾驶安全性.上一节已经分析清倒车雷达的语音模块(上一节),本节将深入分 ...

  3. [转]quick-cocos2d-x 多分辨率适配详解

    http://cn.quick-x.com/?p=1436 多种分辨率的适配一直都是一个蛋疼的问题,各家公司可能都有自己的一套方案.今天我为大家介绍的是我们在多款游戏里实践后的解决方案,相对来说成本和 ...

  4. js模版引擎handlebars.js实用教程——each-循环中使用this

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

  5. MyBatis学习总结(一)——MyBatis快速入门

    一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以 ...

  6. img list

  7. Linux常用命令03

    上篇我们写到,如何编辑文件,我们有时候,在编辑的时候,有可能会异常的退出,这样的话, linux会针对这个文件生成一个swp文件,当你下次进入vi模式时,就会提示你一个错误 这样,即使你按enter键 ...

  8. XML学习笔记6——XPath语言

    在上一篇笔记的结尾,我们接触到了两个用于选择XML文档中特定范围的元素<selector>和<field>,这两个元素的取值都是XPath表达式,那么,什么是XPath呢?简单 ...

  9. Linux快速入门04-扩展知识

    这部分是快速学习的最后一部分知识,其中最重要的内容就是源码的打包和软件的安装的学习,由于个人的Linux学习目的就是自己能在阿里云Ubuntu上搭建一个简单的nodejs发布环境. Linux系列文章 ...

  10. python--基础学习（三）字符串单引号、双引号、三引号

    1.基本认识 单引号字符串:'python' 双引号字符串:"python" 三引号字符串:'''python'''(三单引号),"""python& ...