今天小编跟大家讲解下有关html5画布旋转效果示例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html5画布旋转效果示例 的相关资料，希望小伙伴们看了有所帮助。
keleyi.htm的代码如下：复制代码代码如下:<!DOCTYPE HTML> <html><head><title>html旋转画布</title><script type="text/javascript"src="https://www.aidi.net.cn/jquery-1.10.2.min.js"></script><script type="text/javascript"src="https://www.aidi.net.cn//html5/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); });})();
来源：爱蒂网
