| 标题 | html5画布旋转效果示例 |
| 范文 | 本文介绍了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); }); })(); |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。