html5旋转效果代码,html5 旋转

　　keleyi.htm的代码如下：复制代码代码如下：

　　！声明文档类型

　　超文本标记语言

　　头

　　titlehtml旋转画布/标题

　　脚本类型= text/JavaScript src=/jquery-1。10 .2 .量滴js /脚本

　　脚本类型= text/JavaScript src= jb51。js /脚本

　　/头

　　身体

　　画布id= jb51 /画布

　　/body

　　/html

　　jb51.js的代码如下：复制代码代码如下：

　　/*

　　* 功能：画布旋转

　　*/

　　（函数(){

　　var canvas=null，

　　上下文=空，

　　角度=0 ;

　　函数resetCanvas(){

　　画布=文档。getelementbyid( jb51 )；

　　画布。宽度=窗口。内部宽度；

　　画布。高度=窗口。内部高度；

　　上下文=画布。获取上下文(“2d”)；

　　}

　　函数animate(){

　　语境。save()；

　　尝试{

　　//清除画布

　　context.clearRect(0，0，canvas.width，canvas。身高)；

　　//设置原点

　　语境。翻译(画布。宽度* 0.5，帆布。高度* 0.5)；

　　//旋转角度

　　上下文.旋转(角度);

　　//设置填充颜色

　　语境。填充样式= # ff 0000

　　//绘制矩形

　　context.fillRect(-30，-30，60，60)；

　　角度=0.05 *数学；

　　}

　　最后{

　　语境。restore()；

　　}

　　}

　　$(窗口)。bind(resize ，resetCanvas).绑定(瑞东，resetCanvas)；

　　$(文档)。ready(function(){

　　window.scrollTo(0，1)；

　　resetCanvas()；

　　setInterval(animate，40)；

　　});

　　})();

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。