在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
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="ogeek.js"></script> </head> <body> <canvas id="ogeek"></canvas> </body> </html> ogeek.js的代码如下: 复制代码 代码如下:/* * 功能:画布旋转 */ (function(){ var canvas=null, context=null, angle=0; function resetCanvas(){ canvas=document.getElementById("ogeek"); 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); }); })(); |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论