canvas标签实现动态小球
2016-11-29 17:32
232 查看
Html5 canvas标签实现动态小球
话不多说,直接上代码
实现动态小球的重要函数在于setInterval(code,time),这个方法实现不停调用第一个参数的方法,间隔时间为第二个参数(毫秒)。clearInterval()函数则可以关闭setInterval()方法,实现暂停功能。
第一次写博客,希望可能帮到你!
2016年11月29号
话不多说,直接上代码
<canvas id="mycanvas" width="500" height="500" style="border:1px solid red">不支持H5</canvas>//canvas标签 <div id="div"></div> //定义一个显示效果的层div //定义两个按钮,实现小球的动与停功能 <button id="btn1" onclick="colse=setInterval(drawBall,100)">开始</button> <button id="btn2" onclick="clearInterval(colse)">结束</button> <script type="text/javascript"> var a=document.getElementById("mycanvas"); var cxt=a.getContext("2d"); //定义一个球类 var ball={x:10,y:100,dir_x:10,dir_y:5}; function drawBall(){ //画圆 cxt.beginPath(); cxt.fillStyle="green"; cxt.arc(ball.x,ball.y,10,0,Math.PI*2); cxt.fill();//清除渲染 //球动起来 //ball.dir_x += Math.random()*2; //可实现小球不规则运动 ball.x+=ball.dir_x; //控制x轴方向 //ball.dir_y += Math.random()*2; ball.y+=ball.dir_y; //控制y轴方向 //判断小球运动方向 if(ball.x<0 || ball.x>500){ ball.dir_x*=-1; } if(ball.y<0 || ball.y>500){ ball.dir_y*=-1; } } </script>
实现动态小球的重要函数在于setInterval(code,time),这个方法实现不停调用第一个参数的方法,间隔时间为第二个参数(毫秒)。clearInterval()函数则可以关闭setInterval()方法,实现暂停功能。
第一次写博客,希望可能帮到你!
2016年11月29号
相关文章推荐
- canvas实现动态小球重叠效果
- html5:<canvas>标签实现动态效果
- html5:<canvas>标签实现动态效果
- 用canvas标签实现网页H5动态时钟
- 使用jquery动态生成的标签,需要在代码当中绑定才可以实现事件的监听
- HTML5 vedio标签与canvas的结合实现视频同步模糊效果
- JS实现动态一,二级标签展示例子
- JS跨域调用之JSONP--动态Script标签方式实现跨域
- 后台管理界面,使用a标签配合iframe实现动态局部刷新
- 利用css和js实现页面的标签效果。(标签个数可以动态变化)
- canvas标签应用 简单俄罗斯方块游戏的实现
- VS2008 WINFROM 利用WeifenLuo +OUTLOOKBAR +IrisSkin2.dll实现换肤 标签页面 以及子动态加载子菜单的实实例
- 动态创建script标签实现跨域资源访问的方法介绍
- java实现随机动态的小球
- 用struts2 标签和Jquery 插件实现动态值,自动检索填充中值
- 使用jQuery插件filtrify实现的超酷动态标签分类摩托车新款展示
- <table>标签 利用DOM 的方法和属性实现对表格的动态操作
- 使用jQuery插件filtrify实现的超酷动态标签分类摩托车新款展示
- Struts2动态下拉列表实现【action+struts2标签】
- 学习笔记_用hibernateQBC动态查询+jsp的jstl标签库实现的动态查询以及分页特效