html5画布旋转效果示例
2016-07-11来源:易贤网

本文介绍了JS和html5实现画布旋转效果示例,大家参考使用吧

keleyi.htm的代码如下:

代码如下:

<!DOCTYPE HTML> 

<html>

<head>

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

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

<script type="text/javascript" src="jb51.js"></script>

</head>

<body>

<canvas id="jb51"></canvas>

</body>

</html>

jb51.js的代码如下:

代码如下:

/*

* 功能:画布旋转

*/

(function(){

var canvas=null,

context=null,

angle=0;

function resetCanvas(){

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.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);

});

})();

推荐信息