首页 > 代码库 > 我的项目5 计时器 定时器 JS实现图片运动
我的项目5 计时器 定时器 JS实现图片运动
在一个HTML5项目中用到了定时器,就学习了一下,和大家分享一下经验
需要用到一个方法:
setInterval("ballMove()", 1000);
意思是每秒执行ballMove()方法一次
他能用到什么地方呢,这就需要小伙伴们发挥想象了。在这里我用它写了一个图片自由运到的例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>ggggg</title> <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"">>那么我用Canvas绘制的图呢,我想描绘它所经过的路线
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" charset="utf-8"> //定时器 setInterval("ballMove()", 10); //定义全局变量 //小球坐标 ballX = 0; ballY = 0; //小球在x,y轴移动的方向 directX = 1; directY = 1; //小球移动 function ballMove() { //小球移动 ballX += 2 * directX; ballY += 1 * directY; var c = document.getElementById("mycanvas"); var cxt = c.getContext("2d"); cxt.fillStyle = "#FF0000"; cxt.beginPath(); cxt.arc(ballX, ballY, 2, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); //判断转向 //learInterval(i); if (ballX + 2 >= c.width|| ballX <= 0) { directX = -directX; } if (ballY + 2 >= c.height|| ballY <= 0) { directY = -directY; } } </script> </head> <body> <canvas id="mycanvas" width="400" height="300" style="border: 1px solid red;"></canvas> </body> </html>大家可以试一下,挺有意思的。
我的项目5 计时器 定时器 JS实现图片运动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。