html5画布旋转效果示例

更新时间:2023-04-06 16:17:18 阅读：评论：0

keleyi.htm的代码如下：

复制代码代码如下:

<!doctype html>

<html>

<head>

<title>html旋转画布</title>

<script type=”text/javascript” src=”/jquery-1.10.2.min.js”></script>

<script type=”text/jav苦情花ascript” src=”jb51.js”></script>

</head>

<body>

<canvas id=”jb51″></canvas>

<想出;/body>

</html>

jb51.js的代码如下：

复制代码代码如下:

/*

* 功能：画布旋转

*/

(function(){

var canvas=n勿忘九一八观后感ull,

context=发电厂及电力系统null,

angle=0;

function retcanvas(){

canvas=document.getelementbyid(“jb51”);

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.tran天津大学排名slate(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”,retcanvas).bind(“reorient”,retcanvas);

$(document).ready(function(){

window.scrollto(0,1);

retcanvas();

tinterval(animate,40);

});

})();