来源：自学PHP网 时间：2015-01-26 11:14 作者： 阅读:次
[导读] 本文介绍了JS和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); }); })(); |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
